CSS中有一個非常常見的效果,就是當鼠標懸停在鏈接上時,鏈接的樣式發生變化,這種效果叫做“hover”。
a:hover { color: red; text-decoration: underline; cursor: pointer; }
上面的代碼是一個很基本的hover效果,當鼠標懸停在鏈接上時,鏈接的文字顏色變成了紅色,下劃線出現,鼠標變成了手形指針。其中,color
屬性設為red
可以實現文字顏色變換,text-decoration
屬性設為underline
可以實現下劃線,cursor
屬性設為pointer
可以實現手形指針。
除了文字和下劃線,我們還可以實現背景色、邊框等屬性的變化,例如:
a:hover { background-color: yellow; border: 1px solid black; }
上面的代碼實現了當鼠標懸停在鏈接上時,鏈接的背景變成了黃色,邊框變成了1像素寬的黑線。
總的來說,hover效果可以稍加改變鏈接的樣式,增強頁面交互性,提高用戶體驗。