父 li 仅在特定页面中更改颜色答案

【问题标题】：Parent li is changing color in specific pages only父 li 仅在特定页面中更改颜色
【发布时间】：2013-09-10 12:54:18
【问题描述】：

我有一个使用响应式主题在 wordpress 中实现的网站，我所有的自定义样式和 php 文件都在一个子主题中。

问题出在主导航中，当您将鼠标悬停在“了解更多”导航的任何子 li 时，“了解更多”li 会破坏并更改颜色，并且它的左边框线也会松动。奇怪的是它只发生在网站的 2 个页面上：

https://presslock.org/about/ 和 https://presslock.org/faq/

但在其他页面上它工作正常。

谢谢，任何帮助将不胜感激

【问题讨论】：

使用 page-id-60 page-id-656 参考。在 css 中由 wp_function 在 body 中添加。

标签： css wordpress

【解决方案1】：

快速修复：只需从您的 style.css 文件中删除类 custom-menu-item 的所有样式。去掉这两部分：

.menu .current_page_item a,.menu .current-menu-item a{background-color:#343434;}

和

.current-menu-item a{background-color:#F6BC01;background-image:-moz-linear-gradient(top,#F6BC01,#F5E09A,#F6BC01);background-image:-webkit-linear-gradient(top,#F6BC01,#F5E09A,#F6BC01);background-image:-o-linear-gradient(top,#F6BC01,#F5E09A,#F6BC01);background-image:-ms-linear-gradient(top,#F6BC01,#F5E09A,#F6BC01);background-image:linear-gradient(top,#F6BC01,#F5E09A,#F6BC01);}

如果您对此问题的原因感兴趣，正如 KnowHowSolutions 所述，问题出在特定情况下的 css 属性中。 custom-menu-item 的属性在您将鼠标悬停在菜单项的子项上而当前页面是此菜单项时应用。如果您注意到，当您将鼠标悬停在“资源”的子项上时，https://presslock.org/stats/ 页面上也会发生这种情况。

希望这有助于并原谅我的英语。

【讨论】：

【解决方案2】：

这些 css 行应用于悬停（加上其他一些，Firebug 是检查这些更改的最佳选择）

.menu li:hover a {
    color: #F5E09A;
}
.menu .current_page_item a, .menu .current-menu-item a {
    background-color: #343434;
}
.menu li a {
    color: #660033;
}
.menu a {
    border-left: 1px solid #585858;
    cursor: pointer;
    display: block;
    font-size: 13px;
    font-weight: 700;
    height: 45px;
    line-height: 45px;
    margin: 0;
    padding: 0 0.6em;
    position: relative;
    text-decoration: none;
    text-shadow: 0 -1px 0 #000000;
    white-space: nowrap;
}
.current-menu-item a {
    background-color: #F6BC01;
    background-image: -moz-linear-gradient(center top , #F6BC01, #F5E09A, #F6BC01);
}

最后一项不应用背景色，而是用黄色的背景图像覆盖它。

【讨论】：

其实这很接近，但也差不多。您的渐变仅处于悬停状态，似乎不应应用于所有菜单