css hover是CSS伪类选择器的一种，用于匹配鼠标指针悬停在元素上方时的状态，通过为不同状态设置不同样式，可以让页面产生丰富的交互反馈，是前端样式开发中最基础也最常用的交互实现方式之一。
hover的基本语法
hover伪类需要依附于其他选择器使用，基本语法结构如下：
/* 基础语法：选择器:hover { 样式规则 } */
.box:hover {
background-color: #f0f0f0;
transform: scale(1.05);
}
上述代码表示当鼠标悬停在class为box的元素上时，该元素的背景色会变为浅灰色，同时尺寸放大5%。
常见使用场景
1. 单个元素的样式变化
这是hover最基础的使用场景，比如按钮悬停时的颜色变化、卡片悬停时的阴影效果等。
/* 按钮悬停效果 */
.btn {
padding: 8px 16px;
background-color: #1890ff;
color: #fff;
border: none;
border-radius: 4px;
cursor: pointer;
transition: background-color 0.3s;
}
.btn:hover {
background-color: #096dd9;
}
/* 卡片悬停效果 */
.card {
width: 200px;
padding: 16px;
border: 1px solid #e8e8e8;
border-radius: 8px;
transition: box-shadow 0.3s;
}
.card:hover {
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
2. 子元素的联动变化
可以通过父元素hover触发子元素的样式变化，实现更复杂的联动效果。
/* 父元素悬停时修改子元素样式 */
.parent {
width: 300px;
padding: 20px;
border: 1px solid #e8e8e8;
}
.parent .child {
width: 100%;
height: 40px;
background-color: #f5f5f5;
transition: background-color 0.3s;
}
.parent:hover .child {
background-color: #e6f7ff;
}
3. 相邻兄弟元素的样式变化
结合相邻兄弟选择器+，可以实现鼠标悬停某个元素时，修改其相邻兄弟元素的样式。
/* 悬停第一个元素时修改相邻第二个元素 */
.item1 {
width: 100px;
height: 40px;
background-color: #f5f5f5;
margin-bottom: 10px;
}
.item2 {
width: 100px;
height: 40px;
background-color: #f5f5f5;
transition: background-color 0.3s;
}
.item1:hover + .item2 {
background-color: #fff7e6;
}
使用注意事项
- hover伪类只对能接收鼠标事件的元素生效，比如
<div>、<button>、<a>等，默认状态下<span>、<img>等行内元素也可以生效，但如果是隐藏元素或者设置了pointer-events: none的元素则不会触发hover效果。 - 如果hover设置的样式没有生效，大概率是样式优先级问题，需要检查是否有其他更高优先级的样式覆盖了hover的规则，可以通过增加选择器的权重来解决。
- 建议为hover变化的样式添加
transition过渡属性，让样式变化更平滑，提升用户体验，过渡时间一般设置在0.2s到0.3s之间比较合适。 - hover伪类不支持修改元素的布局属性（比如display、position等）来触发重排的情况，虽然语法上允许，但可能会导致页面闪烁或者交互不流畅，尽量只修改颜色、尺寸、阴影等不会触发重排的属性。
常见问题解答
为什么hover写在元素前面不生效？
CSS选择器的优先级规则中，伪类的优先级和类选择器相同，如果同一个元素同时有普通状态和hover状态的样式，后面的规则会覆盖前面的规则，所以建议把hover规则写在普通状态规则的后面，避免被覆盖。
移动端可以使用hover吗？
移动端没有鼠标指针，hover效果会在元素被点击的瞬间触发，点击其他地方后效果消失，体验并不好，所以移动端建议结合媒体查询，在移动端设备下移除hover相关样式，使用点击交互替代。
/* 仅在非移动端设备应用hover效果 */
@media (hover: hover) {
.box:hover {
background-color: #f0f0f0;
}
}