Bootstrap 禁用悬停行为答案

【问题标题】：Bootstrap disable hover behaviourBootstrap 禁用悬停行为
【发布时间】：2021-10-04 16:35:44
【问题描述】：

我真的很喜欢 Bootstrap 轮廓按钮，并且更喜欢它们而不是填充变体。不幸的是，如果它们确实被点击或悬停在上面，它们会变回常规填充按钮。有没有办法让它们在悬停或点击时保持轮廓？

我尝试重置悬停时的默认样式，但我认为这不会覆盖默认悬停行为。

button:hover{
    @extend .btn;
    @extend .btn-outline-success;
}

【问题讨论】：

当你说它们“变回常规填充按钮”时，你是什么意思？你的意思是他们的悬停状态是填充的吗？因为要改变这一点，您将覆盖内置的:hover 以应用background-color。不要尝试使用inherit - 指定您想要的颜色，它应该可以工作。（在添加您自己的自定义类之前，我会尝试使用 Bootstrap 类来使其正确。）
嗯，我一直在阅读引导文档getbootstrap.com/docs/4.0/components/buttons/#outline-buttons，它没有提到禁用悬停行为的方法。我不想手动修改设置，因为我不知道引导程序更改了多少设置，或者我是否更改了主题。但结果很容易。所以谢谢

标签： sass bootstrap-5

【解决方案1】：

这就是我最终的做法，它会禁用所有效果（对于不同的颜色变体，您必须单独进行）：

.btn-primary:hover,.btn-primary:focus,.btn-primary:active, 
.btn-primary:active:focus:not(:disabled):not(.disabled),
.btn:focus, .btn:active, .btn:hover{
    box-shadow: none!important;
    outline: 0;
    background-color:transparent;
    color:var(--bs-primary);
}

【讨论】：