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


Posted in Javascript onMarch 17, 2017

今天看到一个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://3water.com rel="external nofollow" >Web Designer Wall</a>  
  <em>A wall of design ideas, web trends, and tutorials</em> 
 </li> 
 <li> 
  <a href="http://3water.com" rel="external nofollow" >Best Web Gallery</a> 
 
  <em>Featuring the best CSS and Flash web sites</em> 
 </li> 
 <li> 
  <a href="http://3water.com" 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 相关文章推荐
javascript克隆对象深度介绍
Nov 20 Javascript
JavaScript对象创建及继承原理实例解剖
Feb 28 Javascript
Extjs中通过Tree加载右侧TabPanel具体实现
May 05 Javascript
创建js对象和js类的方法汇总
Dec 24 Javascript
jQuery插件slider实现拖动滑块选取价格范围
Apr 30 Javascript
JavaScript调用浏览器打印功能实例分析
Jul 17 Javascript
深入学习AngularJS中数据的双向绑定机制
Mar 04 Javascript
jQuery height()、innerHeight()、outerHeight()函数的区别详解
May 23 Javascript
ECMAScript6--解构
Mar 30 Javascript
javacript replace 正则取字符串中的值并替换【推荐】
Sep 13 Javascript
使用 electron 实现类似新版 QQ 的登录界面效果(阴影、背景动画、窗体3D翻转)
Oct 23 Javascript
Vue 报错TypeError: this.$set is not a function 的解决方法
Dec 17 Javascript
angularJS之$http:与服务器交互示例
Mar 17 #Javascript
Bootstrap下拉菜单Dropdowns的实现代码
Mar 17 #Javascript
Bootstrap面板(Panels)的简单实现代码
Mar 17 #Javascript
Bootstrap模态框(Modal)实现过渡效果
Mar 17 #Javascript
详解Vue.js入门环境搭建
Mar 17 #Javascript
使用jquery datatable和bootsrap创建表格实例代码
Mar 17 #Javascript
jquery PrintArea 实现票据的套打功能(代码)
Mar 17 #Javascript
You might like
真正面向对象编程:PHP5.01发布
2006/10/09 PHP
一个简单的自动发送邮件系统(二)
2006/10/09 PHP
PHP file_get_contents设置超时处理方法
2013/09/30 PHP
PHP中鲜为人知的10个函数
2014/02/28 PHP
php微信公众号开发模式详解
2016/11/28 PHP
php面向对象重点知识分享
2019/09/27 PHP
JQuery 小练习(实例代码)
2009/08/07 Javascript
jQuery AnythingSlider滑动效果插件
2010/02/07 Javascript
Jquery知识点二 jquery下对数组的操作
2011/01/15 Javascript
从零开始学习jQuery (四) jQuery中操作元素的属性与样式
2011/02/23 Javascript
js控制元素显示在屏幕固定位置及监听屏幕高度变化的方法
2015/08/11 Javascript
原生js实现中奖信息无间隙滚动效果
2017/01/18 Javascript
微信小程序富文本渲染引擎的详解
2017/09/30 Javascript
轻松搞定jQuery+JSONP跨域请求的解决方案
2018/03/06 jQuery
JS中getElementsByClassName与classList兼容性问题解决方案分析
2019/08/07 Javascript
Vue中通过vue-router实现命名视图的问题
2020/04/23 Javascript
Python中enumerate函数代码解析
2017/10/31 Python
Python生成任意范围任意精度的随机数方法
2018/04/09 Python
Python实现自定义顺序、排列写入数据到Excel的方法
2018/04/23 Python
Python八大常见排序算法定义、实现及时间消耗效率分析
2018/04/27 Python
python 分离文件名和路径以及分离文件名和后缀的方法
2018/10/21 Python
对Python实现累加函数的方法详解
2019/01/23 Python
Python 使用Numpy对矩阵进行转置的方法
2019/01/28 Python
python 数据生成excel导出(xlwt,wlsxwrite)代码实例
2019/08/23 Python
Python 面向对象之类class和对象基本用法示例
2020/02/02 Python
Django Model中字段(field)的各种选项说明
2020/05/19 Python
thinkphp5 路由分发原理
2021/03/18 PHP
Hotels.com加拿大:领先的在线住宿网站
2018/10/05 全球购物
采购部部门职责
2013/12/15 职场文书
大学生蛋糕店创业计划书
2014/01/13 职场文书
2014年副班长工作总结
2014/12/10 职场文书
运动会表扬稿
2015/01/16 职场文书
2015年中秋节活动总结
2015/03/23 职场文书
社区法制宣传日活动总结
2015/05/05 职场文书
宾馆安全管理制度
2015/08/06 职场文书
唤醒紫霞仙子,携手再游三界!大话手游X《大话西游》电影合作专属剧情任务
2022/04/03 其他游戏