用jquery模仿的a的title属性(兼容ie6/7)

更新时间：2013年01月21日 10:15:16 作者：

用jQuery实现的模仿a的title属性的例子，在测试的时候ie6,7上出现了层次混乱，不过最终解决了,代码书写很详细，感兴趣的朋友可以了解下哦

用jQuery实现的模仿a的title属性的例子，在测试的时候ie6,7上出现了层次混乱，不过最终解决了。
html代码如下：

 
<div class="wrap"> 
<ul class="list clearfix"> 
<li><a href="">UI设计师</a> 
<div class="show"> 
<p>所属部门：技术部</p> 
<p>工作地点：郑州</p> 
<p>招聘人数：21</p> 
</div> 
</li> 
<li><a href="">前端开发工程师</a> 
<div class="show"> 
<p>所属部门：技术部</p> 
<p>工作地点：郑州</p> 
<p>招聘人数：21</p> 
</div> 
</li> 
<li><a href="">运维工程师</a> 
<div class="show"> 
<p>所属部门：技术部</p> 
<p>工作地点：郑州</p> 
<p>招聘人数：21</p> 
</div> 
</li> 
<li><a href="">研发开发工程师</a> 
<div class="show"> 
<p>所属部门：技术部</p> 
<p>工作地点：郑州</p> 
<p>招聘人数：21</p> 
</div> 
</li> 
<li><a href="">UI设计师</a> 
<div class="show"> 
<p>所属部门：技术部</p> 
<p>工作地点：郑州</p> 
<p>招聘人数：21</p> 
</div> 
</li> 
<li><a href="">前端开发工程师</a> 
<div class="show"> 
<p>所属部门：技术部</p> 
<p>工作地点：郑州</p> 
<p>招聘人数：21</p> 
</div> 
</li> 
<li><a href="">运维工程师</a> 
<div class="show"> 
<p>所属部门：技术部</p> 
<p>工作地点：郑州</p> 
<p>招聘人数：21</p> 
</div> 
</li> 
<li><a href="">研发开发工程师</a> 
<div class="show"> 
<p>所属部门：技术部</p> 
<p>工作地点：郑州</p> 
<p>招聘人数：21</p> 
</div> 
</li> 
<li><a href="">UI设计师</a> 
<div class="show"> 
<p>所属部门：技术部</p> 
<p>工作地点：郑州</p> 
<p>招聘人数：21</p> 
</div> 
</li> 
<li><a href="">前端开发工程师</a> 
<div class="show"> 
<p>所属部门：技术部</p> 
<p>工作地点：郑州</p> 
<p>招聘人数：21</p> 
</div> 
</li> 
<li><a href="">运维工程师</a> 
<div class="show"> 
<p>所属部门：技术部</p> 
<p>工作地点：郑州</p> 
<p>招聘人数：21</p> 
</div> 
</li> 
<li><a href="">研发开发工程师</a> 
<div class="show"> 
<p>所属部门：技术部</p> 
<p>工作地点：郑州</p> 
<p>招聘人数：21</p> 
</div> 
</li> 
</ul> 
</div> 

css代码如下

复制代码代码如下:

 
* { 
margin:0; 
padding:0; 
} 
body { 
font-size:12px; 
} 
.wrap { 
width:600px; 
margin:100px auto; 
} 
.clearfix:after, .clearfix:before { 
display:table; 
content: ""; 
} 
.clearfix:after { 
clear:both; 
overflow: hidden; 
} 
.clearfix { 
zoom: 1; 
} 
.list { 
position:relative; //作为定位的父元素，li直接做父元素出现元素内容重叠问题 
} 
.list li { 
list-style:none; 
width:100px; 
height:24px; 
line-height:24px; 
margin-right:10px; 
float:left; 
} 
.list li a { 
text-decoration:none; 
color:#333; 
display:block; 
} 
.show { 
position:absolute; 
width:100px; 
background:#FFFFE1; 
border:1px solid #ffcc01; 
padding:6px; 
display:none; 
z-index:5; 
margin-top:10px; //代替top 
margin-left:60px; //代替left 
} 
.show p { 
height:18px; 
line-height:18px; 
} 
.list li a:hover { 
text-decoration:underline; 
color:#FF0000; 
} 

jQuery代码如下：

复制代码代码如下:

 
<script type="text/javascript"> 
$(function(){ 
var $li=$(".wrap").find("li"); 
$li.bind("mouseover",function(){ 
$(this).find(".show").show(); 
}).bind("mouseout",function(){ 
$(this).find(".show").hide(); 
}) 
}) 
</script> 

预览效果;

您可能感兴趣的文章:

Jquery图片延迟加载插件jquery.lazyload.js的使用方法
这篇文章主要介绍了Jquery图片延迟加载插件jquery.lazyload.js的使用方法,需要的朋友可以参考下
2014-05-05
jQuery实现二级导航菜单的示例
这篇文章主要介绍了jQuery实现二级导航菜单的示例，帮助大家理解和制作网页特效，感兴趣的朋友可以了解下
2020-09-09
轻松学习jQuery插件EasyUI EasyUI实现树形网络基本操作(2)
这篇文章主要帮助大家轻松学习jQuery插件EasyUI，针对EasyUI实现树形网络基本操作，分为三大方面：动态加载、添加分页、以及惰性加载节点，感兴趣的小伙伴们可以参考一下
2015-11-11
jquery处理json对象
JSON(JavaScript Object Notation)javscript对象标记，是一种轻量级的数据交换格式。具体的详细基础知识可以参考JSON官网http:/www.json.org/。不说太多废话，直接说说我对JSON的理解吧。
2014-11-11
jquery实现表格行的上下移动和置顶
这篇文章主要为大家详细介绍了jquery实现表格行的上下移动和置顶，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-02-02
jQuery探测位置的提示弹窗(toolTip box)详细解析
提示弹窗（toolTip box）经常会被用到，但是本文总要的不是弹，也不是窗，而是探测位置，在适当的地方弹窗。需要的朋友可以过来参考下，希望对大家有所帮助
2013-11-11
页面刷新时记住滚动条的位置jquery代码
这篇文章主要介绍了点击按钮页面刷新的时候记住滚动条的位置,需要的朋友可以参考下
2014-06-06
jQuery 中$(this).index与$.each的使用指南
这篇文章主要介绍了jQuery 中$(this).index与$.each的使用方法，以及使用环境，有需要的小伙伴自己参考下吧
2014-11-11
jquery禁止回车触发表单提交
这篇文章主要介绍了jquery实现的禁止回车触发表单提交的方法，非常的使用，这里推荐给大家。
2014-12-12
Jquery ui css framework
Jquery ui css framework是jquery ui中的一个样式框架，可以利用jquery Theme roller 来生成自己想要的css样式效果。我们可以利用jquery ui的一些框架来开发出基于jquery ui css framework效果的插件来。
2010-06-06