CSS中的鼠標懸停事件可以通過:hover偽類來實現。hover偽類能夠控制元素在鼠標懸停時的樣式。例如,在懸停在鏈接上時,我們可以改變鏈接的顏色或加下劃線。
a:hover { color: red; text-decoration: underline; }
當鼠標移走時,我們可以使用CSS來改變元素的樣式。這可以通過:hover偽類和:not偽類實現。:not偽類可以選擇不滿足某些條件的元素。因此,我們可以使用:not(:hover)偽類,它會選中不懸浮的元素。
button { color: blue; background-color: white; border: 1px solid blue; } button:hover { color: white; background-color: blue; } button:not(:hover) { color: blue; background-color: white; border: 1px solid blue; }
上述代碼中,當懸停在button上時,按鈕將變成藍色的背景和白色的文字,邊框變成白色。當鼠標移走后,按鈕將恢復到最初的狀態。
總之,鼠標懸停離開的樣式可以通過:hover和:not(:hover)偽類來實現。這使得我們可以創建吸引人的用戶體驗和交互性的網頁。