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

Question

我正在使用 Bootstrap button generator 创建按钮。这些是流畅的设计按钮，我注意到当 :disabled 时按钮仍然在 :hover 上投射阴影。

我的问题：

我试过了：

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

但它不起作用。

Answer 1

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

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

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

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

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

Answer 2

这应该可以完成工作，您只是忘记为 :disabled 使用冒号 : 而不是点 .，这意味着 CSS 伪 class .

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

Answer 3

如@Pete 的评论中所述，为了使您的代码正常工作，您需要使用 CSS special state selector, :disabled 而不是 .disabled class.

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

解决第二个问题，它是否特定于 Fluent Design？我不相信 - 截至目前（2018 年 7 月），您找不到任何使用 Fluent Design 做事的简单指南，只有 some general idea.

另一方面，我们会将相同的样式添加到 Fluent Kit 库本身，因为这是我们的疏忽，因此在下一个版本中，您将不会看到提到的已禁用 Bootstrap buttons .

Turn off shadow when hovering disabled button only