html中鼠标冒泡泡,鼠标经过出现气泡框的简单实例

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

1. html

Animated Menu Hover 1

$(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('//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;

}

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

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

html中鼠标冒泡泡,鼠标经过出现气泡框的简单实例相关推荐

html遍历table tr,js中获取 table节点各tr及td的内容简单实例
js中获取 table节点各tr及td的内容简单实例 2019-01-06 编程之家 https://www.jb51.cc 编程之家收集整理的这篇文章主要介绍了js中获取 table节点各tr及td ...
php中mysql的增删_PHP MySql增删改查的简单实例
mysql_connect()连接数据库 mysql_select_db选择数据库 mysql_fetch_assoc()获取结果集 mysql_query()执行sql语句连接命令:mysql - ...
php鼠标滑过跳出别的,鼠标经过出现气泡框实现方法
鼠标特效现在也层出不穷,本文主要为大家带来一篇鼠标经过出现气泡框的简单实例,小编觉得挺不错的,现在就分享给大家,也给大家做个参考.一起跟随小编过来看看吧,希望能让更好的掌握鼠标特效. 今天看到一个cs ...
python pygame鼠标点击_Python中pygame的mouse鼠标事件用法实例
本文实例讲述了Python中pygame的mouse鼠标事件用法.分享给大家供大家参考,具体如下: pygame.mouse提供了一些方法获取鼠标设备当前的状态 ''' pygame.mouse.ge ...
罗技M545鼠标是不是垃圾鼠标中的战斗机？
罗技M545鼠标是不是垃圾鼠标中的战斗机?: 问题,我自己也买了这款鼠标,真的太难用了,定位不准确,有时移动鼠标,光标不动,白纸上都测试了,都不走,连几十块钱的杂牌鼠标都不如?大家有用这款M545的吗 ...
编写一个USB接口程序，模拟计算机启动过程和关闭过程启动过程中要加载鼠标、键盘、麦克风等USB设备，具体要求如下：（1）定义一个接口USB，包含两个抽象方法turnOn()he turnOff(),
一.好物推荐给大家推荐三款蓝牙耳机,下面的链接可以直接购买: 1.https://item.taobao.com/item.htm?ft=t&id=643733003968 2.https: ...
html鼠标悬停显示窗口,javascript-页面中鼠标移动或停留均显示提示框
鼠标移动到隐藏内容时显示提示框,鼠标停留在提示框时依旧显示.鼠标离开提示框和隐藏内容时提示框消失. 使用时配合table框是固定宽度,将超过宽度的多余信息予以用省略号显示. 将table框CSS设置为 ...
axure中交互样式设置鼠标悬停后其他的按下选中无效_Axure交互动作
该楼层疑似违规已被系统折叠隐藏此楼查看此楼 axure中交互样式设置鼠标悬停后其他的按下选中无效_交互区域 -- 交互动作启用情形+交互事件+交互动作三个部分构成了整个原型的交互逻辑.启用情形是 ...
怎样在VI编辑器中使用鼠标移动光标(鼠标点哪里，光标移动到哪里)
怎样在VI编辑器中使用鼠标移动光标(鼠标点哪里,光标移动到哪里) 怎样在VI编辑器中使用鼠标移动光标(鼠标点哪里,光标移动到哪里) 首先,进入目录,找到那个绿色的vimrc文件然后,在vi编辑器中打 ...
Visio中使用键盘和鼠标组合指令后不响应（卡死）的解决方法
最近在使用visio画图时,经常在Ctrl+鼠标左键.Shift+鼠标等键盘+鼠标组合指令使用时会导致viso无响应.如果找不到解决方法只能强制关闭程序,但是这样会导致未保存的更改丢失,影响心情. 在 ...

html中鼠标冒泡泡,鼠标经过出现气泡框的简单实例

html中鼠标冒泡泡,鼠标经过出现气泡框的简单实例相关推荐

最新文章

热门文章