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

Question

我的main menu有点问题。

我想在靠近菜单项时更新悬停颜色。当前，菜单颜色在黑色背景上为白色，但是当靠近菜单项时，菜单颜色也将变为黑色，并且根本不可见。我试图通过这种方式更新颜色：

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

但是似乎没有任何改变。为了更好地解释图片：

谢谢！

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时，就变得非常繁琐而难以覆盖。