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

【www.bbyears.com--鼠标特效】

1. html

<scripttype="text/javascript"src="http://www.webdesignerwall.com/demo/jquery/jquery.js"></script>

<scripttype="text/javascript">

$(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");

 });

});

</script>

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;

}

  Web Designer Wall 

  A wall of design ideas, web trends, and tutorials

  http://www.jb51.net" rel="external nofollow" >Best Web Gallery

  Featuring the best CSS and Flash web sites

  http://www.jb51.net" rel="external nofollow" >N.Design Studio

  Blog and design portfolio of WDW designer, Nick La

2. js

<script type="text/javascript">

$(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");

  });

});

</script>

3. 效果图

本文来源：http://www.bbyears.com/wangyetexiao/132268.html