CSS滑鼠懸浮在超連結上彈出提示框

admin發表於2017-10-22
CSS

超連結有一個title屬性，當滑鼠放在連結的時候，可以出現一個提示框效果，自帶效果雖然實現容易，但不美觀，所以通常需要自定義一個具有類似功能的效果。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
body{
  font-size:14px;
  padding:50px;
}
.tip{
  color:red;
  text-decoration:none;
  position:relative;
}
.tip span{
  display:none;
}
.tip:hover .popbox{
  display:block;
  position:absolute;
  top:15px;
  left:-30px;
  width:100px;
  background-color:#424242;
  color:#fff;
  padding:10px;
}
</style>
</head>
<body>
<a href="#" class="tip">螞蟻部落<span class="popbox">螞蟻部落提供基礎教程</span></a>
</body>
</html>

上面程式碼實現了我們的要求，下面介紹一下它的實現過程。

一.程式碼註釋:

[CSS] 純文字檢視 複製程式碼
.tip{
  color:red;
  text-decoration:none;
  position:relative;
}

設定超練級文字顏色為紅色；去掉超連結底部的下劃線。

最後將其設定為相對定位，它的作用在後面會有介紹。

[CSS] 純文字檢視 複製程式碼
.tip span{
  display:none;
}

預設情況下，彈出層是不顯示的。

[CSS] 純文字檢視 複製程式碼
.tip:hover .popbox{
  display:block;
  position:absolute;
  top:15px;
  left:-30px;
  width:100px;
  background-color:#424242;
  color:#fff;
  padding:10px;
}

當滑鼠懸浮的時候，將彈出層首先設定為isplay:block，也就是將其顯示出來。

再將其設定為絕對定位，然後通過top和left屬性給它定位，位移參考物件就是上層設定為相對定位的父元素。

二.相關閱讀:

（1）.相對定位參閱CSS relative 相對定位一章節。

（2）.:hover參閱CSS E:hover偽類選擇器一章節。

相關文章