css中的hover是伪类选择器的一种，用于匹配当用户鼠标指针悬停在元素上方时的状态，通过它可以给页面元素添加悬停时的样式变化，提升用户交互体验。
hover的基本语法
hover的使用格式为选择器:hover { 样式规则 }，当鼠标移动到对应选择器匹配的元素上时，就会应用大括号内的样式规则。
下面是一个最基础的示例，当鼠标悬停在段落元素上时，文字颜色会变为红色：
p:hover {
color: red;
}
常见使用场景
1. 按钮悬停效果
按钮是hover最常用的场景之一，通常会在悬停时改变背景色、文字颜色或者添加阴影，提示用户该元素可点击。
/* 基础按钮样式 */
.btn {
padding: 10px 20px;
background-color: #409eff;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
transition: all 0.3s ease; /* 添加过渡效果让变化更平滑 */
}
/* 悬停时的样式 */
.btn:hover {
background-color: #337ecc;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}
2. 列表项悬停效果
在导航菜单或者列表组件中，hover可以让当前悬停的项更突出，方便用户识别。
/* 导航列表基础样式 */
.nav-item {
padding: 12px 20px;
color: #333;
text-decoration: none;
display: block;
}
/* 悬停时的样式 */
.nav-item:hover {
background-color: #f5f5f5;
color: #409eff;
}
3. 卡片悬停效果
在商品卡片、文章卡片等组件中，hover可以添加上浮、阴影加深等效果，增强交互感。
/* 卡片基础样式 */
.card {
width: 300px;
padding: 20px;
border: 1px solid #e4e4e4;
border-radius: 8px;
transition: all 0.3s ease;
}
/* 悬停时的样式 */
.card:hover {
transform: translateY(-5px); /* 向上移动5像素 */
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}
hover的嵌套使用
hover也可以嵌套使用，比如当鼠标悬停在一个父容器上时，改变其内部子元素的样式，格式为父选择器:hover 子选择器 { 样式规则 }。
下面的示例实现了鼠标悬停在卡片上时，卡片内的标题文字颜色变化：
/* 卡片悬停时，修改内部标题的样式 */
.card:hover .card-title {
color: #409eff;
}
使用hover的注意事项
- hover仅在鼠标设备可用时生效，在触摸设备上通常不会触发，触摸设备一般使用点击替代悬停交互。
- 如果给元素添加了
transition属性，hover的样式变化会带有平滑的过渡效果，提升视觉体验。 - hover的样式优先级高于元素的基础样式，但是低于内联样式和
!important标记的样式。 - 不要给不可交互的元素（比如纯展示的静态文本）添加过于明显的hover效果，避免误导用户。
常见问题解答
为什么hover样式不生效？
常见原因有三个：一是选择器写错，没有匹配到目标元素；二是样式被更高优先级的规则覆盖；三是元素被其他元素遮挡，鼠标实际没有悬停到目标元素上。
hover可以和其他伪类一起使用吗？
可以，比如a:hover:visited可以匹配已访问链接的悬停状态，不过实际开发中这种组合使用场景较少。