CSS的hover偽類可以為網(wǎng)頁(yè)設(shè)計(jì)帶來(lái)更多的交互效果，使網(wǎng)頁(yè)元素在用戶鼠標(biāo)懸停時(shí)產(chǎn)生各種可定制的事件。

.hover {
background-color: #eee;
}
.hover:hover {
background-color: #ccc;
}

比如上面的代碼，當(dāng)加上.hover這個(gè)class后，元素的背景色會(huì)變成灰色。而當(dāng)鼠標(biāo)懸停在該元素上時(shí)，hover偽類會(huì)發(fā)生作用，將背景顏色變?yōu)楦畹幕疑?/p>

我們還可以使用hover偽類來(lái)改變?cè)氐奈淖诸伾⑦吙驑邮降取１热缦旅娴拇a可以讓按鈕在鼠標(biāo)懸停時(shí)邊框變?yōu)閷?shí)線紅色，文字顏色變?yōu)榘咨?/p>

.button {
border: 1px solid #ccc;
color: #333;
padding: 5px 10px;
}
.button:hover {
border-style: solid;
border-color: red;
color: #fff;
}

CSS的hover偽類可以為網(wǎng)頁(yè)的用戶體驗(yàn)增加不少互動(dòng)性，這種簡(jiǎn)單而有用的特性不容忽視。為了實(shí)現(xiàn)更好的效果，在使用CSS hover時(shí)，我們應(yīng)該注意懸停后的轉(zhuǎn)換不應(yīng)該是太突兀，否則會(huì)給用戶帶來(lái)困擾。