CSS鼠標離開特效是一種可以在鼠標離開元素的時候改變其樣式的效果,通常用于交互和視覺呈現的宏觀效果。
.example { background-color: blue; color: white; transition: all 0.5s ease; } .example:hover { background-color: red; color: black; } .example:mouseout { background-color: blue; color: white; }
以上代碼展示了一個基本的鼠標離開特效,當鼠標懸停在元素上時,會將背景顏色變成紅色,文字顏色變成黑色;當鼠標移出元素時,背景顏色變回藍色,文字顏色變回白色。
這個特效通過CSS中的:hover偽類和:mouseout偽類來實現。當鼠標懸停在元素上時,會觸發:hover偽類的樣式,當鼠標離開元素時,會觸發:mouseout偽類的樣式。
可以通過設置transition來控制顏色的過渡效果。在此示例中,所有樣式的過渡時間都設置為0.5秒,過渡效果為緩動。
總之,CSS鼠標離開特效是一種讓網站更具交互性和視覺效果的方式,可以通過CSS偽類來實現。
上一篇css移動字體大小設置
下一篇css鼠標移上出現圖片