CSS 选择器 :hover

简介

:hover 是一种伪类选择器，用于选择用户在鼠标悬停时的元素。它主要用于实现交互式的效果，如改变按钮颜色、显示下拉菜单等。

基本使用

:hover 通常与其它选择器结合使用，以针对特定元素应用样式变化。例如：

.button:hover {
  background-color: #f0f0f0;
}

上述代码会使带有 .button 类的元素在鼠标悬停时背景色变为浅灰色。

组合选择器

:hover 可以与其他选择器组合使用，创建更复杂的选择器规则。比如，可以为子元素设置鼠标悬停效果：

.parent .child:hover {
  color: red;
}

上述代码表示当鼠标悬停在 .parent 元素内的 .child 子元素上时，文本颜色将变为红色。

动态伪类

:hover 是一种动态伪类，这意味着它的状态会随着用户的交互而改变。与之类似的还有 :active 和 :focus，这些伪类可以一起使用，以实现更丰富的用户体验：

.button:hover,
.button:active,
.button:focus {
  outline: none;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}

这段代码为 .button 类添加了鼠标悬停、激活和聚焦时的视觉效果。

限制与注意事项

虽然 :hover 是一个强大的工具，但需要谨慎使用，尤其是在移动设备上。由于触摸屏设备没有鼠标悬停的概念，因此仅依赖 :hover 的设计可能在这些设备上表现不佳。为了确保良好的用户体验，应考虑为非鼠标交互提供替代方案。

实例演示

以下是一个简单的示例，展示如何利用 :hover 创建交互式按钮：

// www.javascriptcn.com code example
<style>
  .interactive-button {
    padding: 10px 20px;
    font-size: 16px;
    border: 1px solid #ccc;
    background-color: #fff;
    transition: all 0.3s ease;
  }

  .interactive-button:hover {
    background-color: #e0e0e0;
    border-color: #999;
    cursor: pointer;
  }
</style>

<button class="interactive-button">点击我</button>

在这个例子中，当鼠标悬停在按钮上时，按钮的背景色和边框颜色会发生变化，并且光标形状也会变成指针，提示用户这是一个可交互的元素。

结构与布局影响

:hover 也可以用来改变元素的位置或尺寸，从而影响页面布局。例如，当鼠标悬停在某个元素上时，可以通过改变其宽度或高度来创建动画效果：

// www.javascriptcn.com code example
.expanding-box {
  width: 100px;
  height: 100px;
  background-color: #ccc;
  transition: all 0.5s ease;
}

.expanding-box:hover {
  width: 150px;
  height: 150px;
}

这段代码使 .expanding-box 类的元素在鼠标悬停时逐渐扩大到更大的尺寸，产生平滑过渡的效果。