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


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 相关文章推荐
告诉大家什么是JSON
Jun 10 Javascript
Jquery实现图片放大镜效果的思路及代码(自写)
Oct 18 Javascript
深入理解JavaScript系列(30):设计模式之外观模式详解
Mar 03 Javascript
JavaScript闭包实例详解
Jun 03 Javascript
关于js二维数组和多维数组的定义声明(详解)
Oct 02 Javascript
微信小程序 WebSocket详解及应用
Jan 21 Javascript
微信小程序三级联动地址选择器的实例代码
Jul 12 Javascript
vue源码解析之事件机制原理
Apr 21 Javascript
Vue-Router的使用方法
Sep 05 Javascript
小程序:授权、登录、session_key、unionId的详解
May 15 Javascript
详解JS函数防抖
Jun 05 Javascript
Vue操作Storage本地化存储
Apr 29 Vue.js
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
采集邮箱的php代码(抓取网页中的邮箱地址)
2012/07/17 PHP
php输入流php://input使用示例(php发送图片流到服务器)
2013/12/25 PHP
ThinkPHP3.1.3版本新特性概述
2014/06/19 PHP
php生成随机数的三种方法
2014/09/10 PHP
跟我学Laravel之安装Laravel
2014/10/15 PHP
php+jQuery.uploadify实现文件上传教程
2014/12/26 PHP
jquery触发a标签跳转事件示例代码
2013/07/21 Javascript
extjs中form与grid交互数据(record)的方法
2013/08/29 Javascript
推荐一款jQuery插件模板
2015/01/09 Javascript
设置jQueryUI DatePicker默认语言为中文
2016/06/04 Javascript
jQuery页面元素动态添加后绑定事件丢失方法,非 live
2016/06/16 Javascript
jQuery实现发送验证码并60秒倒计时功能
2016/11/25 Javascript
jquery获取select,option所有的value和text的实例
2017/03/06 Javascript
微信小程序富文本渲染引擎的详解
2017/09/30 Javascript
vue 使用ref 让父组件调用子组件的方法
2018/02/08 Javascript
vue+elementUI中表格高亮或字体颜色改变操作
2020/11/02 Javascript
Python 文件重命名工具代码
2009/07/26 Python
python实现mysql的单引号字符串过滤方法
2015/11/14 Python
八大排序算法的Python实现
2021/01/28 Python
利用Python画ROC曲线和AUC值计算
2016/09/19 Python
python利用socketserver实现并发套接字功能
2018/01/26 Python
python每5分钟从kafka中提取数据的例子
2019/12/23 Python
scrapy利用selenium爬取豆瓣阅读的全步骤
2020/09/20 Python
html5 postMessage前端跨域并前端监听的方法示例
2018/11/01 HTML / CSS
奥地利汽车配件店:Pkwteile.at
2017/03/10 全球购物
美国保健品专家:Life Extension
2018/05/04 全球购物
空字符串(“”)和null的区别
2012/11/13 面试题
涉外经济法专业毕业生推荐信
2013/11/24 职场文书
幼儿园教师培训制度
2014/01/16 职场文书
大学生党员自我批评
2014/02/14 职场文书
平安建设工作方案
2014/06/02 职场文书
读群众路线的心得体会
2014/09/03 职场文书
运动会加油稿20字
2014/11/15 职场文书
2014年终个人总结报告
2015/03/09 职场文书
安全知识竞赛主持词
2015/06/30 职场文书
历史名人教你十五个读书方法,赶快Get起来!
2019/07/18 职场文书