简介
: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 创建交互式按钮：
-- -------------------- ---- -------
-------
------------------- -
-------- ---- -----
---------- -----
------- --- ----- -----
----------------- -----
----------- --- ---- -----
-
------------------------- -
----------------- --------
------------- -----
------- --------
-
--------
------- ---------------------------------------在这个例子中，当鼠标悬停在按钮上时，按钮的背景色和边框颜色会发生变化，并且光标形状也会变成指针，提示用户这是一个可交互的元素。
结构与布局影响
:hover 也可以用来改变元素的位置或尺寸，从而影响页面布局。例如，当鼠标悬停在某个元素上时，可以通过改变其宽度或高度来创建动画效果：
-- -------------------- ---- ------- -------------- - ------ ------ ------- ------ ----------------- ----- ----------- --- ---- ----- - -------------------- - ------ ------ ------- ------ -
这段代码使 .expanding-box 类的元素在鼠标悬停时逐渐扩大到更大的尺寸，产生平滑过渡的效果。
