Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript">
  function mouseEvent(e) {
    if (!e) var e = window.event;
    var tg = (window.event) ? e.srcElement : e.target;
    if (tg.nodeName != 'DIV') return;
    var reltg = (e.relatedTarget) ? e.relatedTarget : e.toElement;
    while (reltg != tg && reltg.nodeName != 'BODY')
      reltg= reltg.parentNode
    if (reltg== tg) return;
    // Mouseout took place when mouse actually left layer
    // Handle event
  }
  function toggleByType(id, type, e){
    setTimeout(function(){
      var element = document.getElementById(id);
      if(element.style.display == type){
        mouseEvent(e);
        element.style.display = 'none';  
      } else {
        element.style.display = type;  
      }
    }, 500);
  }
</script>
<style type="text/css">
  body{
    font-family:Arial, Helvetica, sans-serif;  
    font-size:14px;
    color:blue;
    padding:50px;
  }
  
  .box-container{
    background:#fafafa;
    border:1px solid #ebebeb;  
    float:left;
  }
  .box-bridge{
    background:#f2f2f2;
    border:1px solid #ebebeb;
    -moz-border-radius:3px;
    -webkit-border-radius:3px;  
    padding:5px;
  }
  
  .box{
    width:200px;
    height:200px;
    background:#ebebeb;
    border:1px solid #ccc;  
    padding:10px;
    -moz-border-radius:3px;
    -webkit-border-radius:3px;  
    float:left;
    position:absolute;
    margin:0 0 0 px;
  }
</style>
</head>
​
<body>
<div class="box-container" onmouseover="toggleByType('box','block');" onmouseout="toggleByType('box','block', event);">
  <a href="#" class="box-bridge">Show Box</a>
  <div id="box" class="box" style="display:none;">
      Mouse out and this will dissapear.
        <br />
        <a href="#">Roll over to have problems</a>
    </div>
</div>
</body>
</html>
 
​
 
​
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers