css中如何实现鼠标经过出现气泡框效果

这篇文章主要为大家展示了“css中如何实现鼠标经过出现气泡框效果”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“css中如何实现鼠标经过出现气泡框效果”这篇文章吧。

成都创新互联公司主营措美网站建设的网络公司,主营网站建设方案,APP应用开发,措美h5小程序设计搭建,措美网站营销推广欢迎措美等地区企业咨询

1. html

 
 
 
 
 
 
 
 
 
$(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('/upload/otherpic75/button.gif') no-repeat center center; 
} 
.menu li em { 
 background: url('/upload/otherpic75/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 
 
 
 
 
  Best Web Gallery 
 
  Featuring the best CSS and Flash web sites 
 
 
 
 
  N.Design Studio 
  Blog and design portfolio of WDW designer, Nick La 
 
 
 
 
 

2. js

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

3. 效果图

以上是“css中如何实现鼠标经过出现气泡框效果”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注创新互联行业资讯频道！