当我使用 CSS 将鼠标悬停在按钮上时，如何使按钮中的文本改变颜色？

Question

我使用的是 OceanWP WordPress 主题，在顶部栏菜单上，我使用 CSS 创建了一个名为“发布工作”的按钮。

https://prnt.sc/y5s2v9

我正在使用两个顶栏菜单，一个在用户登录时显示，另一个在用户注销时显示。

“发布工作”按钮有 2 像素的紫色边框和紫色背景。紫色为#43455C，文字为白色。 但是当你将鼠标悬停在它上面时，我希望背景变为与顶部栏相同的颜色，#5cd895，文本变为紫色：#43455C，所以我使用了代码：

/* Post a Job Button on logged-in top bar menu */
body #menu-item-840 a{
    color:#fff;
}
#menu-item-840 a{
    font-weight: 600;
    border: 2px solid #43455C;
    background-color: #43455C;
    border-radius: 5px;
    padding: 2px 20px
    }
#menu-item-1272 a:hover {
    color: #43455C;
    background-color: #5cd895;
}

/* Post a Job Button on logged-out top bar menu */
body #menu-item-1272 a{
    color:#fff;
}
#menu-item-1272 a{
    font-weight: 600;
    border: 2px solid #43455C;
    background-color: #43455C;
    border-radius: 5px;
    padding: 2px 20px
    }
#menu-item-1272 a:hover {
    color: #000;
    background-color: #fff;
}

但是当用户登录并在登录时将鼠标悬停在“发布工作”按钮上时，文本只是更改为默认的“黑色”颜色，背景不会改变：

https://prnt.sc/y5soqq

当用户退出并且我将鼠标悬停在“发布工作”按钮上时，背景变为白色，文本变为默认黑色：https://prnt.sc/y5sqo8

我已经多次调整 CSS，但由于某种原因，当您将鼠标悬停在它上面时，它只是默认为这些颜色。

谁能告诉CSS代码有什么问题？

Answer 1

我认为你的 CSS 有错误。

当用户登录时，您的 CSS 悬停代码位于项目 #menu-item-1272 而不是 #menu-item-840。

body #menu-item-840 a{
    color:#fff;
}
#menu-item-840 a{
    font-weight: 600;
    border: 2px solid #43455C;
    background-color: #43455C;
    border-radius: 5px;
    padding: 2px 20px
    }
#menu-item-840 a:hover { /* Error Here, i've replaced 1272 by 840. */
    color: #43455C;
    background-color: #5cd895;
}

/* Post a Job Button on logged-out top bar menu */
body #menu-item-1272 a{
    color:#fff;
}
#menu-item-1272 a{
    font-weight: 600;
    border: 2px solid #43455C;
    background-color: #43455C;
    border-radius: 5px;
    padding: 2px 20px
    }
#menu-item-1272 a:hover {
    color: #000;
    background-color: #fff;
}