css - 如果按钮未禁用，则悬停效果？

Question

我有以下 CSS 规则:

button.medium.fade-btn:hover:not([disabled]) {
  color:red;
}

和 HTML 代码:

<button class="medium fade-btn" disabled></button>

我需要悬停效果仅在按钮未禁用时才起作用。

Answer 1

您没有正确构建选择器

button.medium.fade-btn:hover:not([disabled])

理论上不会选择任何内容，但会搜索按钮的子级(没有)，因为您将其放在悬停之后。

button.medium.fade-btn:not([disabled]):hover

这是正确的方法。

悬停是一个事件，因此您希望该事件发生在未禁用的按钮上，因此它发生在其他所有事件之后。选择元素，然后使用悬停作为最后一部分。使用“disabled: true/false”可能会更容易。

编辑:这可能是浏览器兼容性问题，或者您的浏览器不喜欢在类型选择器中仅使用禁用。您应该尝试在选择器中使用disabled=true，并根据支持 :not() 的版本检查您的浏览器版本。