模擬實現連結title效果程式碼例項

admin發表於2017-02-22
自帶的的連結的title屬性的效果確實太難看了，對外觀要求稍高的網站都要進行自定義的title效果。

下面就介紹一下jquery如何實現此效果，程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>自定義title效果-螞蟻部落</title>
<style type="text/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;
}
.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;
  margin-left:60px;
}
.show p {
  height:18px;
  line-height:18px;
}
.list li a:hover {
  text-decoration:underline;
  color:#FF0000;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<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>
</head>
<body>
<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>
</body>
</html>

相關文章