CSS :hover 伪类

定义和用法

CSS :hover 伪类用于在鼠标悬停时选择元素。

提示：:hover 伪类可以用于所有元素，而不仅仅是链接。

提示：请使用 :link 设置未访问页面的链接样式，使用 :visited 设置已访问页面的链接样式，使用 :active 设置活动链接的样式。

注意：在 CSS 定义中，:hover 必须放在 :link 和 :visited（如果存在）之后才能生效！

实例

例子 1

选择并设置鼠标悬停时的链接样式：

a:hover {
  background-color: yellow;
  font-size: 18px;
}

亲自试一试

例子 2

选择并设置鼠标悬停时的 <p>、<h1> 和 <a> 元素的样式：

p:hover, h1:hover, a:hover {
  background-color: yellow;
}

亲自试一试

例子 3

选择并设置未访问、已访问、悬停和活动链接的样式：

/* 未访问的链接 */
a:link {
  color: green;
}

/* 已访问的链接 */
a:visited {
  color: green;
}

/* 鼠标悬停的链接 */
a:hover {
  color: red;
}

/* 激活的链接 */
a:active {
  color: yellow;
}

亲自试一试

例子 4

为链接设置不同的样式：

a.ex1:hover, a.ex1:active {
  color: red;
}

a.ex2:hover, a.ex2:active {
  font-size: 150%;
}

亲自试一试

例子 5

悬停在 <span> 元素上以显示 <div> 元素（类似于工具提示）：

div {
  display: none;
}

span:hover + div {
  display: block;
}

亲自试一试

例子 6

在鼠标悬停时显示和隐藏“下拉”菜单：

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 语法

:hover {
  css declarations;
}

技术细节

浏览器支持

表格中的数字指定了完全支持该伪类的首个浏览器版本。

相关页面

教程：CSS 链接

教程：CSS 伪类