CSS中設(shè)置hover的延時(shí)可以通過(guò)使用transition屬性來(lái)實(shí)現(xiàn),具體步驟如下:
1、需要為元素定義hover狀態(tài)下的樣式,假設(shè)我們有一個(gè)元素,其類名為.my-element,我們想要在其hover狀態(tài)下改變其背景色,我們可以這樣寫:
.my-element:hover { background-color: red; }
2、我們可以使用transition屬性來(lái)設(shè)置hover狀態(tài)的延時(shí),我們可以將背景色的變化過(guò)程設(shè)置為0.5秒:
.my-element { transition: background-color 0.5s; }
3、這樣,當(dāng)鼠標(biāo)懸停在.my-element上時(shí),背景色會(huì)在0.5秒內(nèi)逐漸變?yōu)榧t色,如果鼠標(biāo)移出.my-element,背景色也會(huì)以同樣的速度恢復(fù)為原來(lái)的顏色。
需要注意的是,如果元素在默認(rèn)狀態(tài)下沒(méi)有定義背景色,那么在鼠標(biāo)移出元素時(shí),背景色可能會(huì)立即恢復(fù)為默認(rèn)值,而不是按照我們?cè)O(shè)置的過(guò)渡效果進(jìn)行恢復(fù),在定義過(guò)渡效果時(shí),***好同時(shí)定義默認(rèn)狀態(tài)和hover狀態(tài)的樣式。
我們還可以使用transition屬性來(lái)設(shè)置其他屬性的過(guò)渡效果,例如顏色、大小等,具體使用方式可以參考CSS的相關(guān)文檔。