CSS可以通過(guò):hover偽類(lèi)來(lái)實(shí)現(xiàn)鼠標(biāo)移動(dòng)變色。
:hover偽類(lèi)用于選擇鼠標(biāo)指針浮動(dòng)在元素上的元素,在這個(gè)狀態(tài)下,你可以為元素添加一些特殊的效果,比如改變顏色。
下面是一個(gè)簡(jiǎn)單的例子,展示如何使用:hover偽類(lèi)來(lái)讓鼠標(biāo)移動(dòng)時(shí)顏色發(fā)生變化:
HTML代碼:
<div class="box"></div>
CSS代碼:
.box { width: 200px; height: 200px; background-color: #ff0000; } .box:hover { background-color: #00ff00; }
在這個(gè)例子中,我們創(chuàng)建了一個(gè)名為.box的div元素,并設(shè)置了它的寬度和高度,我們使用了:hover偽類(lèi)來(lái)添加鼠標(biāo)移動(dòng)時(shí)的***,當(dāng)鼠標(biāo)指針浮動(dòng)在.box元素上時(shí),它的背景顏色會(huì)從#ff0000變?yōu)?00ff00。
你可以根據(jù)自己的需求來(lái)調(diào)整這個(gè)效果,比如改變顏色、添加動(dòng)畫(huà)等,希望這個(gè)例子能幫助你實(shí)現(xiàn)想要的效果!