css的:hover伪类是常用的用户交互伪类，当鼠标指针悬停在目标元素上方时，会触发该伪类对应的样式规则，实现无需JavaScript就能完成的基础交互效果，广泛应用于按钮、导航、卡片等各类页面元素中。
:hover伪类的基本语法
:hover伪类需要结合选择器使用，基本语法结构为选择器:hover { 样式规则 }，当鼠标悬停在对应选择器的元素上时，就会应用花括号内的样式。下面是一个最基础的文字悬停变色示例：
/* 基础文字悬停效果 */
.text-item {
color: #333;
font-size: 16px;
transition: color 0.3s ease; /* 添加过渡让效果更平滑 */
}
.text-item:hover {
color: #ff4d4f; /* 悬停时文字变为红色 */
}
常见元素的:hover实现案例
按钮悬停效果
按钮是:hover使用最频繁的元素，常见的效果包括背景色变化、边框变化、阴影变化等，代码如下：
/* 按钮基础样式 */
.btn {
padding: 8px 20px;
background-color: #1677ff;
color: #fff;
border: 1px solid #1677ff;
border-radius: 4px;
cursor: pointer;
transition: all 0.3s ease;
}
/* 按钮悬停样式 */
.btn:hover {
background-color: #4096ff;
border-color: #4096ff;
box-shadow: 0 2px 8px rgba(22, 119, 255, 0.3);
}
卡片悬停效果
卡片类元素悬停时通常会添加上浮阴影、轻微位移的效果，提升页面的层次感，实现代码如下：
/* 卡片基础样式 */
.card {
width: 300px;
padding: 20px;
background-color: #fff;
border-radius: 8px;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
}
/* 卡片悬停样式 */
.card:hover {
transform: translateY(-5px); /* 向上移动5px */
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}
导航菜单悬停效果
导航菜单的悬停效果通常用于提示当前鼠标指向的菜单项，常见的是下划线或者背景高亮，代码如下：
/* 导航项基础样式 */
.nav-item {
display: inline-block;
padding: 10px 20px;
color: #333;
text-decoration: none;
position: relative;
}
/* 导航项悬停下划线效果 */
.nav-item:hover {
color: #1677ff;
}
.nav-item:hover::after {
content: "";
position: absolute;
bottom: 0;
left: 20px;
right: 20px;
height: 2px;
background-color: #1677ff;
}
:hover使用的注意事项
- 移动端设备没有鼠标指针，因此:hover在移动端通常不会触发，需要结合触摸事件实现类似交互效果。
- 如果元素设置了
pointer-events: none样式，:hover伪类不会生效，因为该属性会禁止元素响应鼠标事件。 - :hover样式的优先级和对应选择器优先级一致，如果存在同优先级的其他样式覆盖，可能导致悬停效果不生效，此时可以适当提升:hover选择器的优先级。
- 建议给:hover相关的样式添加transition过渡属性，让样式变化更平滑，提升用户体验，避免样式突变显得生硬。
兼容性问题说明
:hover伪类属于css2.1的标准内容，所有现代浏览器都支持该特性，包括Chrome、Firefox、Safari、Edge等，IE8及以上版本也支持:hover在大部分元素上的使用，只有IE7及更早版本仅支持<a>标签的:hover伪类，目前的开发场景中基本不需要考虑这类旧版本浏览器的兼容问题。