:hover ~ * 是最常用且稳妥的方式，可精准选中当前悬停元素之后的所有同级兄弟，不误伤前序、跨层或子元素，适用于导航菜单等场景，需配合 transition 和语义化状态确保可访问性与流畅交互。
hover时让同级兄弟元素变透明，用~选择器就行
直接上结论：:hover ~ * 是最常用也最稳妥的方式。它能精准选中「当前鼠标悬停元素之后的所有同级兄弟」，不碰前面的、不跨层级、不误伤子元素。
常见错误是写成 :hover + *，结果只影响紧挨着的下一个兄弟；或者用 *:hover ~ *，导致任意兄弟悬停都触发全体变暗——逻辑反了。
使用场景比如导航菜单、卡片列表、选项组：点一个，其他视觉降级，突出当前焦点。
-
~是通用兄弟选择器，匹配所有在它前面元素之后、同一父级下的兄弟 - 必须确保目标兄弟和悬停元素处于同一层 DOM 结构，不能是孙子或嵌套子项
- 如果父容器有
overflow: hidden或transform，可能影响 hover 区域判定，建议加cursor: pointer显式提示可交互
透明度变化别只用opacity，要考虑可访问性与交互反馈
单纯设 opacity: 0.4 看似简单，但实际会带来两个隐形问题：一是屏幕阅读器无法感知视觉降级，二是鼠标移开后若没加过渡，会显得生硬甚至卡顿。
立即学习“前端免费学习笔记（深入）”；
更合理的做法是搭配 transition 和语义化状态类（如 aria-current="true"），让变化可预期、可回溯。
- 必须加
transition: opacity 0.2s ease，否则透明度突变会让用户感觉“跳” - 避免对
opacity做动画的同时又操作visibility或display，会导致渲染冲突 - 如果兄弟元素含表单控件（如
<input>），透明度降低后仍需保持可聚焦，不能加pointer-events: none
示例：
nav a:hover ~ a {
opacity: 0.5;
transition: opacity 0.15s ease;
}
IE11不支持~选择器？那就用JavaScript兜底
IE11 支持 ~，但老版本 Edge（
核心思路是监听 mouseenter，给父容器加临时 class，再用 CSS 控制子项样式——这样逻辑清晰，调试也方便。
- 不要用
mouseover，它会冒泡触发多次；优先选mouseenter - 加 class 比直接改 style 属性更利于维护，也方便配合 CSS 变量做主题切换
- 记得在
mouseleave时清理 class，否则状态残留会导致后续 hover 失效
简短示例：
const container = document.querySelector('.menu');
container.addEventListener('mouseenter', e => {
if (e.target.matches('a')) {
container.dataset.hovered = e.target.dataset.id;
}
});
// 对应 CSS：.menu[data-hovered="2"] a:not([data-id="2"]) { opacity: 0.4; }
hover失效？先查这三件事
写完发现 hover 没反应，90% 是以下三个原因，按顺序排查比重写 CSS 快得多。
- 父元素没设
position: relative或存在z-index层叠遮挡，导致悬停区域被盖住 - 兄弟元素用了
pointer-events: none（比如为了穿透点击下层），那它自己不会触发 hover，自然也不会影响别人 - CSS 里写了
!important覆盖了 hover 规则，尤其在框架组件里容易中招，用浏览器开发者工具看 computed 样式最直接
真正难搞的是动态插入的兄弟节点——它们不在初始 DOM 里，CSS 选择器不会自动生效，这时候必须靠 JS 监听或手动补 class。
