鼠标经过出现气泡框的简单实例

$(document).ready(function(){

 $(".menu li").hover(function() {

  $(this).find("em").animate({opacity: "show", top: "-75"}, "slow");

 }, function() {

  $(this).find("em").animate({opacity: "hide", top: "-85"}, "fast");

 });

});

body {

 margin: 10px auto;

 width: 570px;

 font: 75%/120% Arial, Helvetica, sans-serif;

}

.menu {

 margin: 100px 0 0;

 padding: 0;

 list-style: none;

}

.menu li {

 padding: 0;

 margin: 0 2px;

 float: left;

 position: relative;

 text-align: center;

}

.menu a {

 padding: 14px 10px;

 display: block;

 color: #000000;

 width: 144px;

 text-decoration: none;

 font-weight: bold;

 background: url('http://files.jb51.net/file_images/article/201703/button.gif') no-repeat center center;

}

.menu li em {

 background: url('http://files.jb51.net/file_images/article/201703/hover.jpg') no-repeat;

 width: 180px;

 height: 45px;

 position: absolute;

 top: -85px;

 left: -15px;

 text-align: center;

 padding: 20px 12px 10px;

 font-style: normal;

 z-index: 2;

 display: none;

}