:hover 偽類在鼠標懸停在元素上時應用樣式,用于創建視覺效果和交互性,常見功能有:更改顏色、添加邊框、顯示隱藏內容和觸發動畫。
CSS 中的 :hover
CSS 中的 :hover 偽類用于為當鼠標懸停在元素上時應用樣式。它允許網站設計師在用戶與網頁交互時創建視覺效果和交互性。
使用方法:
:hover 偽類用于在 CSS 樣式表中選中懸停在特定元素上的元素。其語法如下:
<code class="<a style='color:#f60; text-decoration:underline;' href=" https: target="_blank">css">選擇器:hover { 樣式聲明; }</code>
登錄后復制
其中:
選擇器
指定了要應用樣式的元素。
樣式聲明
定義了鼠標懸停在元素上時要應用的樣式。
示例:
以下代碼將使懸停在具有 “button” 類的元素上的元素背景變為藍色:
<code class="css">.button:hover { background-color: blue; }</code>
登錄后復制
功能:
:hover 偽類可用作交互反饋、顯示隱藏信息或創建動態效果。它通常用于:
更改懸停元素的顏色或背景。
添加或刪除邊框或陰影。
顯示隱藏內容,例如提示或工具提示。
觸發動畫或視覺效果。
兼容性:
:hover 偽類在所有主要瀏覽器中都得到廣泛支持。