实现http://www.wandoujia.com/中的鼠标悬停显示详细信息效果
来源:互联网 发布:权力的游戏知乎 编辑:程序博客网 时间:2024/06/05 11:11
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="jQuery版文字链接鼠标悬停提示效果.aspx.cs" Inherits="_Default" %>
<!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>
<title>jQuery版文字链接鼠标悬停提示效果</title>
<script src="Jquery1.7.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$('.menu a').hover(function () {
$(this).next('em').animate({ opacity: 'show', top:'95px' });
}, function () {
$(this).next('em').animate({ opacity: 'hide' }, "fast");
});
});
</script>
<style type="text/css">
img{ width:100px; height:120px; margin-left:30px;}
.menu {
margin: 100px 0 0;
padding: 0;
list-style: none;
font-size:12px;
}
.menu li {
padding: 0;
float: left;
text-align: center;
}
.menu li em {
position:absolute;
display: none;
background-color:#eee;
width:120px;
}
</style>
</head>
<body>
<ul class="menu">
<li>
<a href="#">
<img src="images/1.jpg" /></a>
<em><b>这是第一张图片</b><br/>李弘基(1990年3月2日-),韩国艺人,庆熙大学演剧电影科09年新生,
FTIsland 乐队成员之一。
</em>
</li>
<li>
<a href="#">
<img src="images/2.jpg" /></a>
<em><b>这是第二张图片</b><br/>绰号:HONG STAR、可爱的叛逆孩子、抽基、二爷、弘小基、
弘宝、李萌基、李弘顺 、李二基 、李红柿 、小弘基、 抽爷、二货、豹纹基 </em>
</li>
<li>
<a href="#">
<img src="images/3.jpg" /></a>
<em><b>这是第三张图片</b><br/>F.T. Island/FTIsland/FT Island),
全称“Five Treasure Island”,简称“FTI”,韩国的流行摇滚乐队。队名意为“五个宝藏的岛”,
借指乐队的五个成员─李弘基(主唱)、崔钟勋(主音吉他手、钢琴)、宋承炫(节奏吉他手、和声)、
李在真(贝斯手、和声)、崔珉焕(鼓手)。</em>
</li>
</ul>
</body>
</html>
- 实现http://www.wandoujia.com/中的鼠标悬停显示详细信息效果
- 鼠标悬停显示详细信息效果
- jQuery购物图片中的鼠标悬停显示详细信息效果
- 转鼠标悬停在datagridview的某单元格,显示悬浮框效果http://www.cnblogs.com/Waming-zhen/archive/2012/06/12/2546472.html
- 用WPF实现在LISTVIEW中的鼠标悬停TOOLTIP显示
- 纯CSS实现图像鼠标悬停效果
- 用css实现的鼠标悬停效果
- 实现鼠标悬停高亮显示
- WinForm实现鼠标悬停显示控件
- css实现鼠标悬停图片放大显示
- css实现鼠标悬停图片放大显示
- 鼠标移动显示详细信息监听实现
- datagrid鼠标悬停效果
- 鼠标悬停效果
- 鼠标经过悬停效果
- 鼠标悬停效果
- css3鼠标悬停效果
- JS实现TITLE悬停长久显示效果
- 屏蔽错误提示
- 数据库优化--局部数据迁移
- 用户名不存在或者表名不存在
- 2012最新SEO外链推广策略
- sql server中如何创建,使用,释放临时表
- 实现http://www.wandoujia.com/中的鼠标悬停显示详细信息效果
- 程序员.策划
- lucene学习--创建索引与搜索
- 双机热备中解决IP漂移后arp表不更新
- linux shell 快捷键
- 《指针与引用的初步复习》
- C语言学习LessonTwo(printf和scanf基本用法)
- Android init代码分析
- Ubuntu中设置环境变量PATH两种方法