直接给 li 设置 :hover 即可实现仅高亮当前项，无需父元素干预或 JavaScript；关键是要确保 li 有明确背景、完整点击区域、足够样式优先级，并可添加 transition 实现平滑效果。
直接给列表项（li）设置 :hover 即可，无需额外处理父元素或 JavaScript。关键在于确保样式只作用于被鼠标悬停的那个 li 本身，而不是影响其他项。
1. 基础写法：直接给 li 加 hover 样式
这是最常用也最可靠的方式。浏览器原生支持 :hover 伪类作用于当前元素，不会波及兄弟节点。
示例：
ul li {
padding: 8px 12px;
cursor: pointer;
}
ul li:hover {
background-color: #007bff;
color: white;
}
这样，鼠标移到哪个 li 上，就只高亮那个，其余保持原样。
立即学习“前端免费学习笔记（深入）”；
2. 避免常见干扰：检查父容器或继承样式
有时看似“全亮”或“不生效”，其实是以下原因：
- 父元素（如
ul）设置了background-color，且li是透明背景——导致视觉上像整块变色；解决：给li明确设background（哪怕是transparent） -
li内部有浮动/绝对定位子元素，撑不开高度，hover 区域变小；解决：加min-height或用display: flex保证可点击区域完整 - CSS 优先级问题：其他规则（如内联样式、更具体的类）覆盖了
:hover；解决：用浏览器开发者工具检查计算样式，适当提高选择器权重（如加ul.menu li:hover）
3. 进阶控制：配合 transition 实现平滑效果
让高亮更自然，可以加过渡动画，且依然只作用于当前项：
ul li {
background-color: transparent;
transition: background-color 0.2s ease, color 0.2s ease;
}
ul li:hover {
background-color: #0056b3;
color: white;
}
注意：transition 写在常态下，不是 :hover 里，这样才能正向/反向都生效。
4. 特殊情况：a 标签嵌套在 li 中
如果 li 里是 ，通常建议把 hover 样式写在 a 上（语义更准、点击区域更大）：
ul li a {
display: block;
padding: 8px 12px;
text-decoration: none;
}
ul li a:hover {
background-color: #007bff;
color: white;
}
此时高亮的仍是当前这一项里的链接，视觉效果等同于高亮整个 li，且更健壮（尤其在移动端）。
基本上就这些。核心就是信任 CSS 的 :hover 机制——它天生就是“只作用于当前元素”的，不需要 JS 或复杂逻辑来隔离。
