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>   預覽效果;
From:http://tw.wingwit.com/Article/program/Java/JSP/201311/20305.html