无需 javascript，仅用 :hover:not(:active) 伪类组合即可优雅实现鼠标悬停时添加样式、按下时不生效的效果，兼顾语义性、性能与可维护性。
在 Web 开发中，常需为按钮添加“悬停高亮”或“按压反馈”等交互效果。一个典型需求是：鼠标移入时添加阴影（如 box-shadow），而鼠标按下（mousedown）时立即移除该效果——这看似需要 JS 监听事件并操作 class，实则可通过纯 CSS 更简洁、高效地完成。
✅ 推荐方案：纯 CSS 伪类组合
利用 CSS 的状态伪类逻辑，直接使用：
.btn:hover:not(:active) {
box-shadow: 5px 5px darkgoldenrod;
}该规则含义明确：
- :hover → 鼠标指针位于元素上方时匹配；
- :not(:active) → 排除当前处于激活态（即鼠标按键被按下）的时刻；
- 组合后效果即为：仅在悬停且未按下时生效，一旦用户点击按钮，:active 状态触发，:hover:not(:active) 立即不匹配，阴影自动消失——完美契合需求。
? 为什么不应使用原 JS 方案？
原始代码存在多个问题：
立即学习“前端免费学习笔记（深入）”；
- ❌ 内联事件（onmouseover="result(1)"）破坏 HTML 与行为分离原则；
- ❌ result(1) 中硬编码索引 n=1，缺乏健壮性，无法适配多按钮场景；
- ❌ onmouseover/onmousedown 被重复赋值，且内部嵌套循环遍历所有按钮，逻辑冗余且易出错；
- ❌ 未考虑 mouseleave 或 mouseup 等边界情况，状态易失控；
- ❌ 违背“渐进增强”理念：CSS 能胜任的交互，优先交由 CSS 处理，更轻量、更可靠、更利于无障碍访问。
✅ 正确的 HTML + CSS 结构示例
<section class="preview">
<div class="container">
<div class="preview__wrapper">
<div class="preview__text">
<h1>Navigating the digital landscape for success</h1>
<div class="preview__descrp">
Our digital marketing agency helps businesses grow and succeed online through a range of services including SEO, PPC, social media marketing, and content creation.
</div>
<button class="btn btn_prev">Book a consultation</button>
</div>
</div>
</div>
</section>.btn {
width: 231px;
height: 68px;
border-radius: 14px;
border: 1px solid #191A23;
background-color: #fff;
color: #000;
font-size: 20px;
padding: 0;
cursor: pointer; // 显式声明可交互性，提升 UX
&_prev {
color: #fff;
background-color: #191A23;
width: 264px;
}
}
// ✅ 核心交互样式：悬停有阴影，按下时无阴影
.btn:hover:not(:active) {
box-shadow: 5px 5px darkgoldenrod;
}
// （可选）增强体验：添加 :active 状态反馈
.btn:active {
transform: translateY(2px); // 模拟按压下沉
box-shadow: none;
}? 补充说明与最佳实践
- 兼容性：:hover:not(:active) 在所有现代浏览器（Chrome、Firefox、Safari、Edge）及 IE9+ 中均被完整支持；
- 移动端注意：在触摸设备上，:hover 可能延迟触发或行为不一致，建议搭配 @media (hover: hover) 做条件启用，或统一使用 :focus-visible 增强键盘可访问性；
- 性能优势：CSS 伪类由渲染引擎原生处理，零 JS 执行开销，无重排重绘风险；
- 可维护性：样式逻辑集中于 CSS，便于设计系统统一管理、主题切换与 A/B 测试。
✅ 总结：面对“悬停添加类、点击移除类”的需求，请优先思考是否可用 CSS 伪类组合解决。本例中，hover:not(active) 是语义清晰、性能卓越、书写简洁的标准解法——让 CSS 做它最擅长的事，把 JS 留给真正需要逻辑判断的场景。
