更改 Wordpress 主菜单链接上的悬停颜色答案

【问题标题】：Change hover color on Wordpress Main menu link更改 Wordpress 主菜单链接上的悬停颜色
【发布时间】：2018-11-28 18:42:11
【问题描述】：

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

但似乎没有做任何改变。用图片更好地解释：

谢谢！！

【问题讨论】：

使用开发者工具并找到左侧的 CSS 代码，:hover state color #141414 !important 覆盖。
kuzar.es/wp-content/themes/pikocon/assets/css/skin/… 中的第 #247 行，如果您可以更改的话。
你对这个 CSS 有意见吗？ .blog-comment ol li li h4{ color: #141414 !important; }
以上代码不会影响您的菜单。
这是您指出的文件中的第 247 行。或者你想过这个？ .back-top:hover{ color: #141414 !important;

标签： php css wordpress menu

【解决方案1】：

我鄙视这么多自定义内置 CSS 样式的一件事是不必要的大量选择器，它们会相互覆盖。

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

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

布莱赫。您可以通过打开开发工具并将:hover 伪类添加到链接来确认这一点。

将此粘贴在您的 CSS 中 skin-green-dark 文件之后或在外观 > 定制器 > 附加 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，以至于覆盖它们变得非常乏味。

【讨论】：