时间戳

首页 > 解决方案 > 当我使用 CSS 将鼠标悬停在按钮上时，我试图让按钮中的文本改变颜色

javascript - 当我使用 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;

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

谢谢

标签： javascriptcsswordpresswordpress-theming

解决方案

这完全取决于你的 DOM 的 CSS 特性，你可以让你的代码在不添加 !important 的情况下工作。

只需增加 CSS 的特异性。（分享你的 HTML 我会用 CSS 的特殊性向你解释）

请阅读 CSS 特性。使用 !important 不是好的做法。这不是干净的代码。浏览这些文章。

不要使用 !important 来增加 CSS 特异性 使用 !important 是正确的选择吗？

推荐阅读