css - 仅在悬停禁用按钮时关闭阴影

Question

我正在使用Bootstrap 按钮生成器创建按钮。这些是流畅的设计按钮，我注意到当:disabled按钮仍然在:hover.

我的问题：

1. 禁用按钮时如何停止阴影？
2. 这样做可以吗？这对我来说似乎是一个不错的选择，但它是否记录在 Fluent Design 按钮的某个地方？

我试过了：

.btn.disabled:hover { box-shadow: none; }

但它不起作用。

Answer 1

这应该可以完成工作，您只是忘记使用冒号代替点:，这意味着 CSS 伪类。:disabled.

.btn:disabled:hover{
    box-shadow: none;
}

Answer 2

将pointer-events:none属性添加到按钮禁用 CSS。

因为，默认按钮悬停是这样写的，我们应该像这样添加一个自定义 CSS。

.btn:disabled{
    pointer-events: none;
}

/*****************OR***************************/

.btn:disabled {
    box-shadow: none !important;
}

Answer 3

正如@Pete 在评论中提到的，为了让您的代码正常工作，您需要使用CSS 特殊状态选择器，:disabled而不是.disabled类。

.btn:disabled { box-shadow: none; }

解决第二个问题，它是否特定于 Fluent Design？我不相信——截至目前（2018 年 7 月），你不会找到任何使用 Fluent Design 做事的简单指南，只有一些一般性的想法。

---

另一方面，我们将向 Fluent Kit 库本身添加相同的样式，因为它是我们的监督，因此在下一个版本中，您不会在提到的禁用Bootstrap 按钮上看到阴影。