jquery模擬實現的連結title提示效果

antzone發表於2017-03-03
jQuery

超連結標籤a自帶的title提示效果簡直是弱爆了，實在是不能夠滿足實際需要，下面介紹一下如何使用jQuery集合css模擬實現此效果，當然這裡的效果還是不夠美觀，至少提供了一個思路，能夠在此基礎上進行方便的擴充。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
*{
  margin:0;
  padding:0;
}
body{font-size:12px;}
.wrap{
  width:600px;
  margin:100px auto;
}
.list li{
  list-style:none;
  width:100px;
  height:24px;
  line-height:24px;
  margin-right:10px;
  position:relative;
}
.list li a{
  text-decoration:none;
  color:#333;
  display:block;
}
.show{
  position:absolute;
  width:130px;
  background:#FFFFE1;
  border:1px solid #ffcc01;
  padding:6px;
  display:none;
  z-index:5;
  margin-top:10px;
}
.show p{
  height:18px;
  line-height:18px;
}
.list li a:hover{
  text-decoration:underline;
  color:#FF0000;
}
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.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="">螞蟻部落</a>
      <div class="show">
        <p>網站名稱：螞蟻部落</p>
        <p>所在位置：青島市南區</p>
        <p>網站年齡：2歲</p>
      </div>
    </li>
  </ul>
</div>
</body>
</html>

以上程式碼，當滑鼠放在超連結上的時候，能夠彈出自定義的提示效果，下面介紹一下實現過程:

一.實現原理:

（1）.如何確定彈出層額位置:

佈局程式碼如下:

[HTML] 純文字檢視 複製程式碼
<li><a href="">螞蟻部落</a> 
  <div class="show"> 
    <p>網站名稱：螞蟻部落</p> 
    <p>所在位置：青島市南區</p> 
     <p>網站年齡：2歲</p> 
   </div> 
</li>

li元素採用相對定位，而彈出層div元素採用絕對定位，這樣彈出層的定位參考物件就是li元素，同時在預設狀態下彈出層div元素是出於隱藏狀態的。

（2）.如何顯示和隱藏:

為li元素註冊mouseover和mouseout事件處理函式，當滑鼠移到連結上的時候，使用show()函式使彈出層出於顯示狀態，離開的時候再使用hide()函式使其處於隱藏狀態。

二.相關閱讀:

1.find()函式可以參閱jQuery find()一章節。

2.mouseover事件可以參閱jQuery mouseover事件一章節。

3.mouseout事件可以參閱jQuery mouseout事件一章節。 

4.show()函式可以參閱jQuery show()一章節。 

5.hide()函式可以參閱jQuery hide()一章節。

相關文章