用jquery模仿的a的title属性的例子

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

html代码如下：

<divclass="wrap">
<ulclass="listclearfix">
<li><ahref="">UI设计师</a>
<divclass="show">
<p>所属部门：技术部</p>
<p>工作地点：郑州</p>
<p>招聘人数：21</p>
</div>
</li>
<li><ahref="">前端开发工程师</a>
<divclass="show">
<p>所属部门：技术部</p>
<p>工作地点：郑州</p>
<p>招聘人数：21</p>
</div>
</li>
<li><ahref="">运维工程师</a>
<divclass="show">
<p>所属部门：技术部</p>
<p>工作地点：郑州</p>
<p>招聘人数：21</p>
</div>
</li>
<li><ahref="">研发开发工程师</a>
<divclass="show">
<p>所属部门：技术部</p>
<p>工作地点：郑州</p>
<p>招聘人数：21</p>
</div>
</li>
<li><ahref="">UI设计师</a>
<divclass="show">
<p>所属部门：技术部</p>
<p>工作地点：郑州</p>
<p>招聘人数：21</p>
</div>
</li>
<li><ahref="">前端开发工程师</a>
<divclass="show">
<p>所属部门：技术部</p>
<p>工作地点：郑州</p>
<p>招聘人数：21</p>
</div>
</li>
<li><ahref="">运维工程师</a>
<divclass="show">
<p>所属部门：技术部</p>
<p>工作地点：郑州</p>
<p>招聘人数：21</p>
</div>
</li>
<li><ahref="">研发开发工程师</a>
<divclass="show">
<p>所属部门：技术部</p>
<p>工作地点：郑州</p>
<p>招聘人数：21</p>
</div>
</li>
<li><ahref="">UI设计师</a>
<divclass="show">
<p>所属部门：技术部</p>
<p>工作地点：郑州</p>
<p>招聘人数：21</p>
</div>
</li>
<li><ahref="">前端开发工程师</a>
<divclass="show">
<p>所属部门：技术部</p>
<p>工作地点：郑州</p>
<p>招聘人数：21</p>
</div>
</li>
<li><ahref="">运维工程师</a>
<divclass="show">
<p>所属部门：技术部</p>
<p>工作地点：郑州</p>
<p>招聘人数：21</p>
</div>
</li>
<li><ahref="">研发开发工程师</a>
<divclass="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:100pxauto;
}
.clearfix:after,.clearfix:before{
display:table;
content:"";
}
.clearfix:after{
clear:both;
overflow:hidden;
}
.clearfix{
zoom:1;
}
.list{
position:relative;//作为定位的父元素，li直接做父元素出现元素内容重叠问题
}
.listli{
list-style:none;
width:100px;
height:24px;
line-height:24px;
margin-right:10px;
float:left;
}
.listlia{
text-decoration:none;
color:#333;
display:block;
}
.show{
position:absolute;
width:100px;
background:#FFFFE1;
border:1pxsolid#ffcc01;
padding:6px;
display:none;
z-index:5;
margin-top:10px;//代替top
margin-left:60px;//代替left
}
.showp{
height:18px;
line-height:18px;
}
.listlia:hover{
text-decoration:underline;
color:#FF0000;
}

jQuery代码如下：

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

预览效果;