css實現滑鼠滑過切換背景圖片程式碼

admin發表於2017-03-04
CSS

本章節介紹一個最為簡單也比較常用的滑鼠效果，那就是滑鼠滑過實現背景圖片切換效果。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
ul li{
  list-style:none;
  font-size:12px;
  float:left;
  width:67px;
  height:23px;
  text-align:center;
}
ul li a{
  display:block;
  height:23px;
  width:67px;
  height:23px;
  line-height:23px;
  background:url(mytest/demo/bt.jpg) no-repeat -4px -4px;
  border:0px;
}
ul li a:hover{
  width:67px;
  height:23px;
  line-height:23px;
  background:url(mytest/demo/bt.jpg) no-repeat -4px -30px;
  border:0px;
}
</style>
</head>
<body>
<ul>
  <li><a>螞蟻部落一</a></li>
  <li><a>螞蟻部落二</a></li>
  <li><a>螞蟻部落三</a></li>
  <li><a>螞蟻部落四</a></li>
</ul>
</body>
</html>

以上程式碼實現了我們的要求，當滑鼠懸浮的時候，能夠實現滑鼠背景切換效果，下面簡單介紹一下實現原理。

使用的背景圖片如下:

相關文章