jquery模仿的a的title属性

html代码如下

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

</ul>
</div>css代码如下* {
margin:;
padding:;
}
body {
fontsize:px;
}
wrap {
width:px;
margin:px auto;
}
clearfix:after clearfix:before {
display:table;
content: "";
}
clearfix:after {
clear:both;
overflow: hidden;
}
clearfix {
zoom: ;
}
list {
position:relative; //作为定位的父元素li直接做父元素出现元素内容重叠问题
}
list li {
liststyle:none;
width:px;
height:px;
lineheight:px;
marginright:px;
float:left;
}
list li a {
textdecoration:none;
color:#;
display:block;
}
show {
position:absolute;
width:px;
background:#FFFFE;
border:px solid #ffcc;
padding:px;
display:none;
zindex:;
margintop:px; //代替top
marginleft:px; //代替left
}
show p {
height:px;
lineheight:px;
}
list li a:hover {
textdecoration:underline;
color:#FF;
}jQuery代码如下<script type="text/javascript">
$(function(){
var $li=$("wrap")find("li");
$libind("mouseover"function(){
$(this)find("show")show();
})bind("mouseout"function(){
$(this)find("show")hide();
})
})
</script>预览效果;