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

语法

:hover 选择器的语法如下：

------------- -
  -- -- --
-

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

用法

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

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

示例

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

改变文本颜色：

------- -
  ------ ----
-

改变背景颜色：

------------ -
  ----------------- -----
-

显示隐藏内容：

---- -----------------------

-- ---------
  -------------------
----

-------- -
  -------- -----
-

------- -------- -
  -------- ------
-

改变元素大小：

--------- -
  ------ ------
  ------- ------
-

与其他伪类选择器的结合

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

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

注意

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