:hover 选择器用于为当鼠标悬停在元素上时应用样式。它是一种伪类选择器，可以与任何 HTML 元素一起使用。

语法

:hover 选择器的语法如下：

element:hover {
  /* 样式 */
}

其中，element 是要应用样式的 HTML 元素。

用法

:hover 选择器广泛用于以下场景：

• 突出显示链接或按钮：当鼠标悬停在链接或按钮上时，可以改变其颜色、背景或文本样式。
• 显示隐藏内容：当鼠标悬停在元素上时，可以显示通常隐藏的内容，例如提示或其他信息。
• 改变元素大小或位置：当鼠标悬停在元素上时，可以改变其大小或位置，从而创建交互式效果。

示例

以下是一些使用 :hover 选择器的示例：

改变文本颜色：

a:hover {
  color: red;
}

改变背景颜色：

button:hover {
  background-color: blue;
}

显示隐藏内容：

<div id="tooltip">提示信息</div>

<a href="#">
  <span>悬停显示提示</span>
</a>

#tooltip {
  display: none;
}

a:hover #tooltip {
  display: block;
}

改变元素大小：

div:hover {
  width: 200px;
  height: 200px;
}

与其他伪类选择器的结合

:hover 选择器可以与其他伪类选择器结合使用，以创建更复杂的交互效果。例如：

• :active：当元素被激活时（例如，按钮被点击时）。
• :focus：当元素获得焦点时（例如，输入框被选中时）。
• :visited：当元素已被访问过时。

注意

• :hover 选择器仅在鼠标悬停在元素上时触发。
• :hover 选择器对触摸设备无效，因为触摸设备没有悬停事件。
• 在某些情况下，:hover 选择器可能会因浏览器兼容性问题而导致样式不一致。