如何取消/禁用来自另一个CSS库的悬停和活动效果？

Question

我正在使用Social Buttons for Bootstrap在我的网站上添加社交按钮。该文件基本上是一个CSS，它使用Font Awesome，并且为各种社交网络定义了大约20多个类。 使用Bootstrap Social定义的按钮具有悬停和活动效果。

我想要做的是禁用悬停/活动效果，因此按钮会变为静态，即没有任何悬停/点击功能。

理想情况下，我想要一些CSS类，比如“btn-static”，它会取消来自悬停/活动效果的样式更改。

这甚至可能吗？

我想避免为每个社交网络创建单独的CSS类，或者修改原始CSS文件。希望添加可以取消悬停/活动事件的自定义类。

例如，这里是定义的按钮：

<span class="btn btn-social btn-facebook">
    <span class="fa fa-facebook"></span>Facebook
</span>

我尝试过使用：

.btn-static:active, .btn-static:hover { background-color: none; }

和

.btn-static:active, .btn-static:hover { background-color: inherit; }

但这只是让按钮具有透明背景。我希望它保持原有的颜色。在某种程度上可以在CSS中引用原始颜色吗？

更新＃1： JSFiddler可用

Answer 1

这是一个黑客：

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

According to Can I Use，它得到了很好的支持。请查看该页面上的已知问题选项卡，因为这不会扩展到许多其他用途。

Answer 2

理想情况下，使用更具体的选择器。例如：

#IDofYourFooter .btn:active, #IDofYourFooter .btn:hover, #IDofYourFooter .btn:focus {
   background-color: [whatever] !important;
}

如果您真的无法提供更具体的选择器，请使用!important覆盖内联的CSS或来自您的样式后出现的第三方来源的CSS：

.btn:active, .btn:hover, .btn:focus {
   background-color: [whatever] !important;
}

看到我在那里添加了:focus选择器。此外，使用!important几乎总会在未来产生维护问题。

请注意，更改样式不会禁用链接，它只会混淆它们。确保它们不在<a href…>中，但如果这样做，则没有理由编写这些样式。如果悬停样式应用于<a href…>之外，则原始来源的作业很差，或者添加了脚本可点击性。