仅在悬停禁用按钮时关闭阴影
Turn off shadow when hovering disabled button only
我正在使用 Bootstrap button generator 创建按钮。这些是流畅的设计按钮,我注意到当 :disabled
时按钮仍然在 :hover
上投射阴影。
我的问题:
- 如何在禁用按钮时停止阴影?
- 这样做可以吗?它 似乎 对我来说是个不错的选择,但它是否在某处记录了 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 .
我正在使用 Bootstrap button generator 创建按钮。这些是流畅的设计按钮,我注意到当 :disabled
时按钮仍然在 :hover
上投射阴影。
我的问题:
- 如何在禁用按钮时停止阴影?
- 这样做可以吗?它 似乎 对我来说是个不错的选择,但它是否在某处记录了 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 .