在“超鏈接偽類”這一節，我們知道“a:hover”是定義鼠標經過超鏈接（a標簽）時的樣式。不僅是初學者，甚至包括很多學習CSS很久的人都以為“:hover”只限於a標簽，都覺得“:hover”唯一的作用就是定義鼠標經過超鏈接（a標簽）時的樣式。
你要是那樣理解，那你就埋沒了一個功能強大的CSS技巧了！請記住，“:hover”偽類可以定義任何一個元素在鼠標經過時的樣式！
語法：
元素:hover{}
說明：
“元素”可以是任意的塊元素和行內元素。
舉例1：
在線測試
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>:hover偽類</title>
<style type="text/css">
#div1
{
width:100px;
height:30px;
line-height:30px;
border:1px solid #CCCCCC;
text-align:center;
color:white;
background-color: #40B20F;
}
#div1:hover{background-color: #286E0A;}
img:hover{border:1px solid red;}
</style>
</head>
<body>
<div id="div1"> 學習網</div>
<img src="../App_images/lesson/run_cj/cartoongirl.gif" alt=""/>
</body>
</html>
在浏覽器預覽效果如下：
鼠標經過時樣式如下：
分析：
鼠標經過div層時，我們改變了它的背景顏色，而鼠標經過img圖片時，我們為圖片添加了一個紅色邊框。
“:hover”偽類應用非常廣泛，在 學習網中也大量使用，大家仔細觀察一下 學習網就知道了。