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

更新时间：2017年03月17日 09:29:14 投稿：jingxian

下面小编就为大家带来一篇鼠标经过出现气泡框的简单实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧

今天看到一个css效果不错，转一下

1. html

<!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>Animated Menu Hover 1</title> 
 
<script type="text/javascript" src="http://www.webdesignerwall.com/demo/jquery/jquery.js"></script> 
 
<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> 
 
<style type="text/css"> 
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('//img.jbzj.com/file_images/article/201703/button.gif') no-repeat center center; 
} 
.menu li em { 
 background: url('//img.jbzj.com/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; 
} 
</style> 
</head> 
 
<body> 
 
<ul class="menu"> 
 <li> 
  <a href=https://www.jb51.net rel="external nofollow" >Web Designer Wall</a>  
  <em>A wall of design ideas, web trends, and tutorials</em> 
 </li> 
 <li> 
  <a href="http://www.jb51.net" rel="external nofollow" >Best Web Gallery</a> 
 
  <em>Featuring the best CSS and Flash web sites</em> 
 </li> 
 <li> 
  <a href="http://www.jb51.net" rel="external nofollow" >N.Design Studio</a> 
  <em>Blog and design portfolio of WDW designer, Nick La</em> 
 </li> 
</ul> 
 
</body> 
</html>

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. 效果图

以上这篇鼠标经过出现气泡框的简单实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

JavaScript实现鼠标滑过处生成气泡的方法

基于Jquery 好友选择器V2.0
之前发布过一片文章：自己动手做jquery 好友输入提示插件 ,现在这次发布的是增强版，在功能和用户体验等方面多做了改善和拓展。
2009-05-05
jQuery插件的写法分享
这几天在学习jQuery插件的写法，搜索了一些资料，包括jQuery官方的示例，但发现描述的并不是很清晰。最后，终于搜索到一篇讲解比较清晰的文章，这里自己总结了一下，并以一个具体的示例来说明jQuery插件的写法
2013-06-06
jQuery EasyUI 布局之动态添加tabs标签页
本文给大家介绍jquery easyui布局之动态添加tabs标签页，实现思路是这样的通过调用add方法就可以轻松实现，本文分步骤给大家详细介绍，需要的朋友一起学习吧
2015-11-11
jQuery多级手风琴菜单实例讲解
这篇文章主要介绍了jQuery实现多级手风琴菜单，菜单效果更有特色，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2015-10-10
jquery $.trim()方法使用介绍
$.trim(str)的作用是去掉字符串首尾空格，下面为大家介绍下其具体的使用
2014-05-05
JQuery实现列表中复选框全选反选功能封装(推荐)
在做列表时经常会遇到全选，反选进行批量处理问题。通过本文给大家介绍JQuery实现列表中复选框全选反选功能封装，对jq复选框全选反选功能感兴趣的朋友一起看看吧
2016-11-11
web的各种前端打印方法之jquery打印插件PrintArea实现网页打印
jquery打印插件PrintArea实现网页打印,不可思议吧，接下来为您介绍它的使用方法及操作步骤，感兴趣的朋友可以了解下
2013-01-01
jQuery如何实现点击页面获得当前点击元素的id或其他信息
点击页面获得当前点击元素的id或者其他信息，使用jquery可以轻松做到这一点，下面有个不错的示例，希望对大家有所帮助
2014-01-01
JSON+Jquery省市区三级联动
这篇文章主要介绍了JSON+Jquery省市区三级联动的相关资料,需要的朋友可以参考下
2016-01-01
JQuery之proxy实现绑定代理方法
下面小编就为大家带来一篇JQuery之proxy实现绑定代理方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-08-08