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


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 相关文章推荐
采用CSS和JS,刚好我最近有个站点要用到下拉菜单!
Jun 26 Javascript
发现的以前不知道的函数
Sep 19 Javascript
无缝滚动改进版支持上下左右滚动(封装成函数)
Dec 04 Javascript
前台js改变Session的值(用ajax实现)
Dec 28 Javascript
JavaScript加强之自定义callback示例
Sep 21 Javascript
Javascript设置对象的ReadOnly属性(示例代码)
Dec 25 Javascript
用js一次改变多个input的readonly属性值的方法
Jun 11 Javascript
JavaScript实现弹出DIV层同时页面背景渐变成半透明效果
Mar 25 Javascript
Bootstrap实现的经典栅格布局效果实例【附demo源码】
Mar 30 Javascript
深入理解vue2.0路由如何配置问题
Jul 18 Javascript
Javascript实现动态时钟效果
Nov 17 Javascript
vue集成kindeditor富文本的实现示例代码
Jun 07 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
PHP利用COM对象访问SQLServer、Access
2006/10/09 PHP
php 的加密函数 md5,crypt,base64_encode 等使用介绍
2012/04/09 PHP
深入apache配置文件httpd.conf的部分参数说明
2013/06/28 PHP
读jQuery之六 缓存数据功能介绍
2011/06/21 Javascript
JS获取客户端IP地址、MAC和主机名的7个方法汇总
2014/07/21 Javascript
javascript结合ajax读取txt文件内容
2014/12/05 Javascript
javascript中DOM复选框选择用法实例
2015/05/14 Javascript
基于JavaScript如何实现ajax调用后台定义的方法
2015/12/29 Javascript
CSS或者JS实现鼠标悬停显示另一元素
2016/01/22 Javascript
理解javascript正则表达式
2016/03/08 Javascript
手机浏览器 后退按钮强制刷新页面方法总结
2016/10/09 Javascript
JavaScript仿聊天室聊天记录
2016/12/27 Javascript
微信小程序自定义导航隐藏和显示功能
2017/06/13 Javascript
js模块加载方式浅析
2017/08/12 Javascript
vue-router 组件复用问题详解
2018/01/22 Javascript
vue 实现Web端的定位功能 获取经纬度
2019/08/08 Javascript
微信小程序制作扭蛋机代码实例
2019/09/24 Javascript
vue中 v-for循环的用法详解
2020/02/19 Javascript
vue3.0自定义指令(drectives)知识点总结
2020/12/27 Vue.js
[01:04:22]2018DOTA2亚洲邀请赛 3.31 小组赛 B组 IG vs EG
2018/04/01 DOTA
pip 错误unused-command-line-argument-hard-error-in-future解决办法
2014/06/01 Python
Python3.2模拟实现webqq登录
2016/02/15 Python
python实现爱奇艺登陆密码RSA加密的方法示例详解
2020/05/27 Python
python与c语言的语法有哪些不一样的
2020/09/13 Python
python cookie反爬处理的实现
2020/11/01 Python
html5 canvas实现跟随鼠标旋转的箭头
2016/03/11 HTML / CSS
Html5踩坑记之mandMobile使用小记
2020/04/02 HTML / CSS
马德里竞技官方网上商店:Atletico Madrid Shop
2019/03/31 全球购物
应聘自荐信
2013/12/14 职场文书
孝老爱亲模范事迹
2014/01/24 职场文书
竞聘书格式及范文
2014/03/31 职场文书
班组长竞聘书
2014/03/31 职场文书
3的组成教学反思
2014/04/30 职场文书
永远跟党走演讲稿
2014/09/12 职场文书
党员四风自我剖析材料
2014/10/07 职场文书
详解盒子端CSS动画性能提升
2021/05/24 HTML / CSS