我有一个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;
… 将鼠标悬停在文本上时, 会将文本的颜色更改为白色吗？
谢谢
#1这与你的DOM的CSS特定性有关, 你可以使代码正常工作而无需添加！important。
【我使用CSS将鼠标悬停在按钮上时，试图使按钮中的文本更改颜色】只需增加CSS的特异性即可。 (分享你的HTML, 我将通过CSS特定性向你解释)
请阅读有关CSS特异性的信息。使用！important不是一个好习惯。这不是干净的代码。浏览这些文章。
不要使用！important来提高CSS的特殊性使用！important是正确的选择吗？
#2要覆盖现有CSS, 请添加！important, 如下所示：
#menu-item-1847 a:hover {
color: #fff!important;
background-color: #25ad00!important;
}
#3你可以像这样使用！important语句。 (如果你正确指定了选择器, 否则请仔细检查选择器＃menu-item-1847)
#menu-item-1847 a:hover {
color: #fff!important;
}
这意味着, 类似于：
如果周围没有其他重要的事情, 请使用我！
推荐阅读
- 我无法在WP查询中使用分页
- 我正在尝试在busiprof主题中编辑index-slider.php文件，但它没有任何改变
- 我正在使用woo-commerce创建一个图书销售网站。我想在其中使用图书作者的名字的地方。我怎样才能做到这一点（）
- 我向WordPress子主题文件添加了内联样式。它们在页面上呈现，但不在主题文件中呈现
- HTML至WordPress 3流程
- 走进Java接口测试之日志框架Logback
- Loguru模块
- 一文搞懂单向散列加密（MD5SHA-1SHA-2SHA-3）
- 利用VMware Storage Performance Tester进行一键式存储性能测试