如何解决当我使用 CSS 将鼠标悬停在按钮上时,如何使按钮中的文本更改颜色?
我使用的是 OceanWP wordpress 主题,并在顶部栏菜单上使用 CSS 创建了一个名为“发布工作”的按钮。
我使用了两个顶栏菜单,一个在用户登录时显示,一个在用户注销时显示。
“发布工作”按钮有一个 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/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;
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。