Question

我从事小型Wordpress项目的工作，很难让菜单按我喜欢的方式工作。在我网站上的homepage上，菜单颜色为棕色，并且在将光标移到其中某些菜单上时，菜单颜色没有变化。例如，当靠近购物车符号时，颜色会像其他菜单项一样从白色变为棕色。所以我想对我所有的菜单项都起作用。奇怪的是，此问题仅出现在首页上，例如在其他页面shop上，它的工作方式是我希望它出现在所有站点中。我发现要定义菜单CSS类：

 .fusion-is-sticky .fusion-main-menu > ul > li.current-menu-ancestor > a, .fusion-is-sticky .fusion-main-menu > ul > li.current-menu-item > a, .fusion-is-sticky .fusion-main-menu > ul > li.current-menu-parent > a, .fusion-is-sticky .fusion-main-menu > ul > li.current_page_item > a, .fusion-is-sticky .fusion-main-menu > ul > li:not(.fusion-middle-logo-menu-logo) > a:hover, .fusion-main-menu > ul > li.current-menu-ancestor > a, .fusion-main-menu > ul > li.current-menu-item > a, .fusion-main-menu > ul > li.current-menu-parent > a, .fusion-main-menu > ul > li.current_page_item > a, .fusion-main-menu > ul > li:not(.fusion-middle-logo-menu-logo) > a:hover, .fusion-main-menu > ul > li:not(.fusion-middle-logo-menu-logo):hover > a 
background-color:#ceb19c;
}

当将background-color:#ceb19c;更改为background-color:#fff;时，所有菜单项都变成白色背景，但是将其关闭时，不会像在商店页面中那样变为棕色。有人可以帮助我解决此问题吗？

Answer 1

您可能可以使用此CSS规则，该规则在主页上定位到导航中的顶级链接。

body.home a.fusion-top-level-link:hover {
    background-color: #fff !important;
}

Answer 2

无论是悬停还是使用该#ceb19c十六进制值悬停，CSS都是相同的。您需要将悬停颜色分开，例如：

body.home .menu-item .fusion-top-level-link:hover{
 background: #fff (or any color you want it to be)
}

这应该可以解决问题

用光标关闭时更改主Wordpress菜单的悬停颜色

2 个答案: