CSS如何结合:hover与:not伪类排除disabled类实现悬停效果

你的CSS选择器逻辑存在两处错误，导致规则完全不生效：

• :hover 和 :not(.disabled) 之间多余的空格是后代选择符，这个写法会尝试匹配「悬停状态的tr元素内部，类名不为disabled的后代元素下的td」，但你的disabled类是直接加在<tr>标签本身的，不是tr的子元素，自然无法命中目标。
• :not(.disabled) 应该作用在tr元素本身，用来过滤掉带disabled类的行，而不是用来筛选tr的后代元素。

直接把:not(.disabled)拼接在tr的类选择器后，和:hover同级即可：

.menubaroptions tr.menubaroption:not(.disabled):hover td {
   opacity: 1;
   text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 20px #fff, 0 0 40px #0ff, 0 0 80px #0ff;
}

• 对不带disabled类的菜单栏行，鼠标悬停时行内td会正常应用发光样式
• 对带disabled类的菜单栏行，选择器会直接跳过匹配，悬停时不会触发任何效果，完全匹配你的需求

内容的提问来源于stack exchange，提问作者Vincent