在WordPress主菜单链接上更改悬停颜色

Question

我在主菜单上遇到了一个小问题。

当鼠标靠近菜单项时，我想更新悬停颜色。目前菜单的颜色为白色，而背景为黑色，但是当靠近菜单项时，它会变为黑色，完全不可见。我尝试以以下方式更新颜色：

    .piko-layout-header .piko-navbar .piko-mega-menu.piko-mega-menu- 
    light.dark>.nav.navbar-nav>li .dropdown-menu>li>a:hover {
     color:#fff;
     } 

但似乎没有产生任何变化。为了更好地解释，附上图片：

谢谢！！

- David Copper

---

如果您可以更改，那么请修改 https://www.kuzar.es/wp-content/themes/pikocon/assets/css/skin/skin-green-dark.css?ver=4.9.6 中的第247行。 - m4n0

那是你指向的文件中的第247行。或者你考虑过这个吗？.back-top:hover{ color: #141414 !important; - David Copper

是的，但那只是很小的一部分。你指出的代码只影响博客评论中的h4标签。#menu-home li a:hover应该是要定位的代码。 - m4n0

请查看此问题的答案。那是完美的答案，而且运行良好。 - David Copper

很好，很高兴它对你有用 :) - m4n0

Answer 1

我讨厌很多自定义CSS样式中不必要的重复选择器，它们会互相覆盖。

这是当前将其样式设置为黑色的CSS：

/*... */
.piko-layout-header .piko-navbar .piko-mega-menu > .nav.navbar-nav > li > .piko-link:hover,
/*...*/ {
    color: #141414 !important
}

呃，您可以通过打开开发工具并将:hover伪类添加到链接中来确认此问题。

将以下代码放入skin-green-dark文件之后的CSS中或在外观>定制器>附加CSS中：

.piko-layout-header .piko-navbar .piko-mega-menu > .nav.navbar-nav > li > .piko-link:hover {
    color: #fff !important;
}

如果仍然被覆盖，那么意味着它已经被上面的选择器覆盖了，您可以通过将其更改为以下内容使其更具特异性：

header.piko-layout-header .piko-navbar .piko-mega-menu > .nav.navbar-nav > li > .piko-link:hover {
    color: #fff !important;
}

这些超级特定的选择器变得非常麻烦，特别是当它们开始随意使用 !important 时，覆盖它们变得非常乏味。

- Xhynk