直接给 li 设置 :hover 即可实现仅高亮当前项，无需父元素干预或 JavaScript；关键是要确保 li 有明确背景、完整点击区域、足够样式优先级，并可添加 transition 实现平滑效果。
直接给列表项（li）设置 :hover 即可，无需额外处理父元素或 JavaScript。关键在于确保样式只作用于被鼠标悬停的那个 li 本身，而不是影响其他项。
这是最常用也最可靠的方式。浏览器原生支持 :hover 伪类作用于当前元素，不会波及兄弟节点。
示例：
ul li {
padding: 8px 12px;
cursor: pointer;
}
ul li:hover {
background-color: #007bff;
color: white;
}这样，鼠标移到哪个 li 上，就只高亮那个，其余保持原样。
立即学习“前端免费学习笔记（深入）”；
有时看似“全亮”或“不生效”，其实是以下原因：
ul）设置了 background-color，且 li 是透明背景——导致视觉上像整块变色；解决：给 li 明确设 background（哪怕是 transparent）li 内部有浮动/绝对定位子元素，撑不开高度，hover 区域变小；解决：加 min-height 或用 display: flex 保证可点击区域完整:hover；解决：用浏览器开发者工具检查计算样式，适当提高选择器权重（如加 ul.menu li:hover）让高亮更自然，可以加过渡动画，且依然只作用于当前项：
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 里，这样才能正向/反向都生效。
如果 li 里是 <a></a>，通常建议把 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 或复杂逻辑来隔离。
以上就是css列表项hover时只想高亮当前一项怎么做_利用:hover伪类单独控制当前元素高亮的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
127
收藏
