直接用 :hover 伪类即可实现悬停效果，无需 JavaScript；需配合 transition 实现动画，为非交互元素添加 cursor: pointer 提升可靠性，注意兼容性与移动端适配。
怎么用 :hover 给元素加悬停效果
直接给目标元素写 :hover 伪类样式就行，不需要 JavaScript。它只作用于支持鼠标的设备（桌面端），移动端默认不触发（除非模拟 hover 的特殊场景）。
-
:hover必须写在对应选择器的后面，比如a:hover、.btn:hover，不能单独写:hover - 只能作用于「用户可交互」的元素（如
<a>、<button>、<div>等均可，但<span>默认无交互行为，需加cursor: pointer或tabindex才稳定响应） - 过渡动画要显式加
transition，否则样式变化是瞬时的
button {
background-color: #007bff;
color: white;
border: none;
padding: 8px 16px;
transition: background-color 0.2s ease, transform 0.15s ease;
}
button:hover {
background-color: #0056b3;
transform: scale(1.05);
}
:hover 不生效的常见原因
不是 CSS 写错了，大概率是被其他规则覆盖、或元素本身不满足触发条件。
- 父元素有
pointer-events: none，会阻止所有子元素的 hover（包括<a>） - 目标元素没有设置
display或被visibility: hidden/opacity: 0遮盖（注意：opacity: 0仍可触发 hover，visibility: hidden不行） - CSS 优先级不够：比如用类名写的
.nav-item:hover被标签选择器a:hover覆盖了，就加!important或提升选择器权重 - 在 Chrome 等浏览器的「移动设备模拟」模式下，hover 可能被禁用或延迟触发，真机测试才准
给图片、链接、按钮以外的元素加 hover 效果
纯静态 HTML 中，<div>、<section>、<article> 这些容器默认没交互语义，但加一行 cursor: pointer 就能让用户意识到“可悬停”，也能让 hover 更可靠。
- 必须确保该元素有明确尺寸（比如设置了
width/height或内容撑开），否则 hover 区域为 0 - 若元素内含子元素遮挡（如绝对定位的图层），可能拦截鼠标事件，需检查
z-index和pointer-events - 想让文字链接悬停时下划线变色又不跳动，推荐用
text-decoration: underline solid #007bff+text-underline-offset控制位置
div.card {
padding: 16px;
border: 1px solid #e0e0e0;
cursor: pointer;
transition: border-color 0.2s;
}
div.card:hover {
border-color: #007bff;
box-shadow: 0 2px 6px rgba(0,123,255,0.1);
}
兼容性与性能提醒
:hover 在所有现代浏览器中都支持，IE8+ 也支持，但 IE8 不支持对非 <a> 元素使用（所以老项目慎用在 <div> 上）。
立即学习“前端免费学习笔记（深入）”；
- 避免在
:hover中触发重排（reflow），比如改height、width、margin；优先用transform、opacity、background-color这类只触发布局或绘制的属性 - 不要在大量列表项（如 100+
<li>）上逐个写 hover 动画，CSS 引擎会批量处理，但过度复杂样式仍可能卡顿 - 如果页面要适配触摸屏，别依赖 hover 做关键交互（比如悬停才显示菜单），应提供点击展开的 fallback
transition 声明和 cursor: pointer 提示，这两处一补，90% 的 hover 问题就解决了。 
