css滑鼠懸浮切換圖片滑鼠離開又恢復預設

antzone發表於2017-04-12
CSS

在實際應用中，經常會遇到這樣的效果，那就是在預設狀態下元素顯示一張圖片，當滑鼠懸浮的時候又會顯示另外的圖片，當滑鼠離開的時候又會恢復預設圖片，下面通過程式碼例項介紹一下如何實現此效果。

程式碼如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html><html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
#link{
  width:100px;
  height:30px;
  display:block;
  overflow:hidden;
  background:url(mytest/demo/default.jpg);
}
#link:hover{
  background:url(mytest/demo/alt.jpg);
}
</style>
</head> 
<body>
<a id="link"></a>
</body> 
</html>

上面的程式碼實現了我們的要求，當滑鼠懸浮的時候可以切換背景圖片，滑鼠離開又恢復預設，原理非常的簡單，就是利用連結偽類實現此效果，這裡不多介紹了，具體可以參閱CSS E:hover一章節。

相關文章