CSS :hover 偽類
更多“自己嘗試”的例子見下文。
定義和用法
:hover 偽類用於在滑鼠懸停在元素上時選擇該元素。
提示： :hover 偽類可用於所有元素，不僅僅是連結。
提示： 使用 :link 為未訪問過的連結設定樣式，使用 :visited 為已訪問過的連結設定樣式，使用 :active 為活動連結設定樣式。
注意： :hover 必須出現在 CSS 定義中的 :link 和 :visited (如果存在) 之後，才能生效！
| 版本 | CSS1 |
|---|
瀏覽器支援
表中數字表示該偽類完全支援的第一個瀏覽器版本。
| 偽類 | |||||
|---|---|---|---|---|---|
| :hover | 4.0 | 7.0 | 2.0 | 3.1 | 9.6 |
CSS 語法
更多示例
示例
當滑鼠懸停在 <p>、<h1> 和 <a> 元素上時，選擇並設定樣式
p:hover, h1:hover, a:hover {
background-color: yellow;
}
自己動手試一試 »
示例
選擇未訪問、已訪問、滑鼠懸停和活動連結並設定不同樣式
/* 未訪問的連結 */
a:link {
color: green;
}
/* 已訪問的連結 */
a:visited {
color: green;
}
/* 滑鼠懸停在連結上 */
a:hover {
color: red;
}
/* 選中的連結 */
a:active {
color: yellow;
}
自己動手試一試 »
示例
用不同的樣式設定連結的樣式
a.ex1:hover, a.ex1:active {
color: red;
}
a.ex2:hover, a.ex2:active {
font-size: 150%;
}
自己動手試一試 »
示例
滑鼠懸停在 <span> 元素上以顯示 <div> 元素（類似工具提示）
div {
display: none;
}
span:hover + div {
display: block;
}
自己動手試一試 »
示例
滑鼠懸停時顯示和隱藏“下拉”選單
ul {
display: inline;
margin: 0;
padding: 0;
}
ul li {display: inline-block;}
ul li:hover {background: #555;}
ul li:hover ul {display: block;}
ul li ul {
position: absolute;
width: 200px;
display: none;
}
ul li ul li {
background: #555;
display: block;
}
ul li ul li a {display:block !important;}
ul li ul li:hover {background: #666;}
自己動手試一試 »
相關頁面
CSS 教程：CSS 連結
CSS 教程：CSS 偽類
