我有一个使用响应式主题在 wordpress 中实现的网站,我所有的自定义样式和 php 文件都在一个子主题中。
问题出在主导航中,当您将“了解更多”导航的任何子 li 悬停时,“了解更多”li 正在破坏和更改颜色,并且它的左边框线也变松了。奇怪的是它只发生在网站的 2 页上:
https://presslock.org/about/和https://presslock.org/faq/
但在其他页面上它工作正常。
谢谢,任何帮助将不胜感激
我有一个使用响应式主题在 wordpress 中实现的网站,我所有的自定义样式和 php 文件都在一个子主题中。
问题出在主导航中,当您将“了解更多”导航的任何子 li 悬停时,“了解更多”li 正在破坏和更改颜色,并且它的左边框线也变松了。奇怪的是它只发生在网站的 2 页上:
https://presslock.org/about/和https://presslock.org/faq/
但在其他页面上它工作正常。
谢谢,任何帮助将不胜感激
这些 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);
}
最后一项不应用背景颜色,而是用黄色的背景图像覆盖它。
快速修复:只需custom-menu-item
从 style.css 文件中删除类的所有样式。删除这两个部分:
.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/页面上发生这种情况。
希望这有助于并原谅我的英语。