我使用CSS将鼠标悬停在按钮上时，试图使按钮中的文本更改颜色

我有一个wordpress网站, 并且在标题菜单中有一个按钮, 称为”以商人身份加入”。

http://prntscr.com/px7mdt

它具有绿色边框和白色背景, 文本为黑色。

我希望将鼠标悬停在按钮的背景上时, 将其背景更改为绿色(颜色：＃25ad00), 并将文本更改为白色(颜色：#fff)。

我已将以下代码添加到自定义css仪表板：

body #menu-item-1847 a{
    color:#000;
}
#menu-item-1847 a{
    font-weight: 700;
    border: 2px solid #25ad00;
        border-radius: 5px;
    padding: 2px 20px
    }
#menu-item-1847 a:hover {
    color: #fff;
    background-color: #25ad00;
}

…但是现在当我将鼠标悬停在按钮上时, 背景变为绿色, 但文本仍为黑色：

http://prntscr.com/px7o9u

我当时正在徘徊代码的问题所在, 因为我认为

#menu-item-1847 a:hover {
    color: #fff;

…将鼠标悬停在文本上时, 会将文本的颜色更改为白色吗？

谢谢

#1

这与你的DOM的CSS特定性有关, 你可以使代码正常工作而无需添加！important。

只需增加CSS的特异性即可。 (分享你的HTML, 我将通过CSS特定性向你解释)

请阅读有关CSS特异性的信息。使用！important不是一个好习惯。这不是干净的代码。浏览这些文章。

不要使用！important来提高CSS的特殊性使用！important是正确的选择吗？

#2

要覆盖现有CSS, 请添加！important, 如下所示：

#menu-item-1847 a:hover {
color: #fff!important;
background-color: #25ad00!important;
}

#3

你可以像这样使用！important语句。 (如果你正确指定了选择器, 否则请仔细检查选择器＃menu-item-1847)

#menu-item-1847 a:hover {
    color: #fff!important;
}

这意味着, 类似于：

如果周围没有其他重要的事情, 请使用我！