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>
<html>
<head>
  <meta charset="utf-8" />
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
  <script src="http://cherne.net/brian/resources/jquery.hoverIntent.js"></script>
<title>JS Bin</title>
</head>
<body>
  <div id="mOver">mouse over this
    <div id="here" class="shadowBG"><span>Header</span><hr/><a href="http://www.google.com" target="_blank">This link is clickable!</a><hr/><span>end</span></div>
</div>
</body>
</html>
​
 
.shadowBG {
  padding: 5px;
  -moz-box-shadow: 5px 5px rgba(0,0,0,0.3);
  -webkit-box-shadow: 5px 5px rgba(0,0,0,0.3);
  box-shadow: 5px 5px rgba(0,0,0,0.3);
  display:none;
  background-color:#333333;
  color:#CCCCCC;
  border-bottom:1px solid #CCCCCC;
  border-right:1px solid #CCCCCC;
  text-decoration:none;
  position:absolute;
  width: 0px;
  height: 0px;
}
​
#mOver {
  padding: 0 5px;
  background:#E0EAF1;
  color: #4a6b82;
  position:absolute;
}
​
#mOver:hover {
  background: #4a6b82;
  color: #E0EAF1;
}
 
$(function() {
  $('#mOver').hoverIntent({
    over: function(){                           
      $('#here').show().animate({
        height:"100px",
        width:"200"
      }, 500); // opening anim time
    },
    timeout: 0, // wait before mouseout
    out: function(){
      $('#here').animate({
        height:"0px",
        width:"0px"
      }, 
      0, //closing animation time
      function (elem) {
        $(this).hide();
      }); 
    }
  });
});
Output 300px

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

Dismiss x
public
Bin info
anonymouspro
0viewers