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