css - 不是整个按钮在悬停时改变

Question

当我将鼠标悬停在主页 ( https://howtogetrippedathome.com/) 的“阅读我的故事”按钮上时，发生了一些奇怪的事情。当我将鼠标悬停在按钮的一侧时，只有整个按钮变为红色(但文本不会变为白色)。当我快速将鼠标悬停在按钮中的文本上时，文本和文本的背景颜色为 chagne 颜色，但按钮的其余部分略微紧随其后。

我已经阅读了数十篇文章并尝试了所有方法，但我无法使其正常工作。我认为这与我定位的元素有关，但我不知道如何做对。

我使用以下代码:

.so-widget-sow-button .ow-button-base :hover {
    color: #fff;
    background-color: #ff2828;
    transition: 0.5s;
}

非常感谢您的帮助，因为我现在有点迷路了。

Answer 1

我在您的样式表中找到了这个 css:

.so-widget-sow-button-wire-95a2a00335aa .ow-button-base a:visited,
.so-widget-sow-button-wire-95a2a00335aa .ow-button-base a:active,
.so-widget-sow-button-wire-95a2a00335aa .ow-button-base a:hover {
            color: #ff2828 !important;
}

如您所见，ow-button-base 中悬停链接的文本颜色强制为红色。删除 a:hover 行解决了冲突；我还能够解决问题并添加此 css:

.ow-button-base a.ow-icon-placement-left:hover {
  color:white !important;
}