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

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并根据以下版本检查浏览器版本：