CSS滑鼠懸浮在連結之上背景變色程式碼

admin發表於2017-02-22
CSS

滑鼠懸浮連結變色效果非常的常見，當然也非常的簡單，下面通過例項程式碼介紹一下如何實現此效果。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>螞蟻部落</title> 
<style type="text/css"> 
li{list-style:none} 
.ant{ 
  display:block; 
  width:100px; 
  height:30px; 
  line-height:30px; 
  text-align:center; 
  color:white;
  margin-top:5px; 
  text-decoration:none; 
} 
.ant:link{background-color:#60F}
.ant:visited{background-color:#60F}
.ant:hover{background-color:#F00}
.ant:active{background-color:#60F}
</style> 
</head> 
<body> 
<ul id="box"> 
  <li><a href="#" class="ant">螞蟻部落一</a></li> 
  <li><a href="#" class="ant">螞蟻部落二</a></li> 
  <li><a href="#" class="ant">螞蟻部落三</a></li> 
  <li><a href="#" class="ant">螞蟻部落四</a></li> 
  <li><a href="#" class="ant">螞蟻部落五</a></li> 
</ul> 
</body> 
</html>

相關文章