:not(:hover)无效，因浏览器兼容性差且语义仅限单元素状态判断；跨元素悬停控制须用+、~、空格关系选择器；推荐js切换类名实现“悬停高亮当前、其余变灰”。
:not(:hover) 不能用于选择“悬停之外的其他元素”——它根本不会生效，浏览器会直接忽略整条规则。
为什么 :not(:hover) 在绝大多数场景下是无效的
CSS 规范允许 :not() 包含伪类，但实际支持极其有限：:not(:hover) 理论上合法，但 Chrome 直到 105+ 版本才开始支持，Firefox 和 Safari 仍不支持或行为不稳定。你写 div:not(:hover) { opacity: 0.5; }，在旧版 Chrome、所有 IE、当前 Safari 中都会被完全跳过，样式不应用。
更关键的是语义陷阱：:not(:hover) 描述的是「当前未被悬停的该元素自身」，不是「其他没被悬停的兄弟/后代元素」。它无法实现“悬停 A 时让 B、C、D 变灰”这种跨元素控制。
- 它不产生“反向匹配”，只是对单个元素做状态判断
- 它不触发重绘传播，不影响其他元素的计算样式
- 即使支持，它的作用域也仅限于当前选择器所匹配的那个元素
真正能影响“其他元素”的 hover 写法只有三种关系选择器
想让悬停一个元素时改变别的元素样式，必须依赖 DOM 结构关系，且仅以下三类有效：
-
.trigger:hover + .target：只影响.trigger后面紧邻的兄弟元素（下一个同级.target） -
.trigger:hover ~ .target：影响.trigger后面所有同级的.target（不一定是紧邻） -
.trigger:hover .descendant：影响.trigger内部任意后代（包括子、孙、曾孙等）
注意：.trigger:hover .sibling 是错的——.sibling 如果不在 .trigger 内部，这个选择器永远不匹配；.trigger:hover .parent 也无效，CSS 无法向上选择父级。
想“排除当前悬停项”，用类名比伪类更可靠
如果目标是「悬停某个 item 时，其余所有 item 显示淡色，当前高亮」，不要碰 :not(:hover)。正确做法是用 JS 切换状态类，再用 CSS 做分离控制：
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
.list-item { opacity: 0.6; }
.list-item.is-hovered { opacity: 1; }
然后 JS 绑定：
document.querySelectorAll('.list-item').forEach(el => {
el.addEventListener('mouseenter', () => {
document.querySelectorAll('.list-item').forEach(i => i.classList.remove('is-hovered'));
el.classList.add('is-hovered');
});
});
- 避免了浏览器兼容性雷区
- 逻辑清晰，可扩展（比如加 delay、支持键盘焦点）
- 不会因 DOM 顺序变化而失效（不像
~或+那样强依赖结构）
真要禁用某个元素的 hover 效果，优先用 pointer-events: none
如果你只是想让某个按钮“看起来可点但实际不响应 hover”，最轻量的做法是：
.disabled-button {
pointer-events: none;
}
它会让该元素彻底脱离鼠标事件流，:hover、:active 全部失效。但注意副作用：
- 点击事件也会被穿透到下层元素
- 键盘
:focus依然可能触发（需额外加tabindex="-1"或移除） - IE10 及以下不支持（不过现在基本可忽略）
若需保留点击但禁用 hover，就只能走 JS 类名方案——给元素加 .no-hover，然后写 .btn:hover:not(.no-hover)，并确保这条规则在原始 .btn:hover 之后声明。
真正难的从来不是写对一行 CSS，而是搞清浏览器到底认不认、认到什么程度，以及 DOM 关系是否允许你那样想。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
