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

问题描述

我使用的是 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 代码有什么问题吗？

解决方法

我认为您的 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;
}