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

2024-05-02 • 问答

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

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

当鼠标悬停在按钮上时，我希望按钮的背景变为绿色（颜色：＃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;

...当我将鼠标悬停在上方时，会将文本的颜色更改为白色吗？

谢谢

要覆盖现有CSS，请添加!important，如下所示：

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

您可以像这样使用!important语句。（如果您正确指定了选择器，否则请仔细检查选择器＃menu-item-1847）

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

这意味着，类似于：

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

这与您的DOM的CSS特殊性有关，您可以在不添加！important的情况下使代码正常工作。

只需增加CSS特异性即可。（分享您的HTML，我会用CSS专用性向您解释）

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

Don't use !important instead increase CSS specificity Is Using !important is a right choice?

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

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

大家都在问