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

Turn off shadow when hovering disabled button only

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

我的问题:

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

我试过了:

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

但它不起作用。

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

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

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

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

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

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

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

如@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 .