CSS滑鼠放在連結上出現彈出框

青衫無名發表於2018-03-01
CSS

滑鼠滑過連結的時候彈出一個資訊框效果比較常用，使用JavaScript可以實現，使用CSS也可以實現，下面通過程式碼例項對此做一下簡單介紹，程式碼例項如下:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
div{height:30px;}
div a{
  display:block;
  width:100px;
  height:30px;
  text-align:center;
  line-height:30px;
  margin-left:5px;
  float:left;
  text-decoration:none;
  background-color:#CCC;
  position:relative;
}
div a span{
  width:120px;
  height:60px;
  display:none;
  background-color:#CC3;
  position:absolute;
  left:80px;
  top:30px;
  z-index:10
}
div a:hover span{display:block}
</style>
</head>
<body>
<div> 
  <a href="#">螞蟻部落一<span>資訊提示框</span></a> 
  <a href="#">螞蟻部落二<span>資訊提示框</span></a> 
  <a href="#">螞蟻部落三<span>資訊提示框</span></a> 
  <a href="#">螞蟻部落四<span>資訊提示框</span></a> 
  <a href="#">螞蟻部落五<span>資訊提示框</span></a> 
</div>
</body>
</html>

當滑鼠滑過連結的時候彈出資訊提示框，原理很簡單，利用連結偽類a:hover和絕對定位實現的。

預設狀態下span元素是隱藏的，當滑鼠放在連結上的時候，span元素顯示，並且span元素採用絕對定位，連結a元素採用相對定位，那麼span元素的定位參考物件就是a元素。


原文釋出時間為：2018-2-3

本文作者：admin

本文來自雲棲社群合作伙伴“螞蟻部落”，瞭解相關資訊可以關注螞蟻部落

原文連結：CSS滑鼠放在連結上出現彈出框


相關文章