css滑鼠懸浮彈出說明層效果

admin發表於2017-10-28
CSS

本章節分享一段程式碼例項，它是使用純css實現的滑鼠懸浮彈出說明層效果。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>螞蟻部落</title> 
<style>
div{
  clear:both;
  margin:5px 0 0 0;
  font-size:12px;
  line-height:22px;
}
a.alt{
  position:relative;
  background-color:#fff;
  float:left;
  width:158px;
  height:20px;
  margin:0 auto;
  border:1px solid #eee;
  text-align:center;
  text-decoration:none;
  color:#0066cc;
}
a.alt:hover{
  background:#fff;
  text-decoration:none;
  z-index:2;
}
a.alt span{
  display:none;
}
a.alt:hover span{
  position:absolute;
  display:block;
  top:-1px;
  left:158px;
  width:130px;
  height:30px;
  border:1px solid #eee;
  z-index:1;
}
</style>
</head>
<body>
<div><a class="alt" href="/"><span>前端網站</span>螞蟻部落</a></div>
<div><a class="alt" href="/"><span>網址是softwhy.com</span>antzone</a></div>
</body>
</html>

預設狀態下span元素是隱藏的，當滑鼠懸浮的時候，下面的CSS程式碼就會立馬生效:

[CSS] 純文字檢視 複製程式碼
a.alt:hover span{
  position:absolute;
  display:block;
  top:-1px;
  left:158px;
  width:130px;
  height:30px;
  border:1px solid #eee;
  z-index:1;
}

採用絕對定位的方式，將這個彈出層定位於連結的右側。

相關文章