:hover 偽類用于在鼠標(biāo)懸停在元素上時應(yīng)用樣式,為用戶提供視覺反饋。它通常應(yīng)用于鏈接和按鈕,可實(shí)現(xiàn)更改顏色、添加邊框、調(diào)整大小等效果,增強(qiáng)交互性。
a:hover 在 CSS 中的用法
:hover
偽類用于在鼠標(biāo)懸停在元素(通常是鏈接或按鈕)上時應(yīng)用樣式。它允許創(chuàng)建交互式元素,為用戶提供視覺反饋。
語法:
<code class="<a style='color:#f60; text-decoration:underline;' href=" https: target="_blank">css">a:hover { /* 懸停時應(yīng)用的樣式 */ }</code>
登錄后復(fù)制
應(yīng)用:
將 :hover
偽類應(yīng)用于 a
元素,可以實(shí)現(xiàn)以下效果:
更改文本顏色
添加背景顏色或漸變
應(yīng)用邊框或陰影
更改字體樣式(粗體、斜體)
調(diào)整元素大小或位置
示例:
以下示例將懸停時將鏈接的文本變?yōu)樗{(lán)色,并添加下劃線:
<code class="css">a:hover { color: blue; text-decoration: underline; }</code>
登錄后復(fù)制
其他用途:
除了鏈接之外,:hover
偽類還可以應(yīng)用于其他元素,如:
按鈕:在懸停時突出顯示或更改按鈕顏色
菜單項(xiàng):在懸停時顯示子菜單或更改項(xiàng)顏色
圖像:在懸停時顯示工具提示或放大圖像