Question

我有一个图像（精确的标识）作为Ubermenu（一个流行的Wordpress插件）的第一项。当我将鼠标悬停在Ubermenu中的此图像上时，包含图像的“li”的背景颜色会发生变化。

HTML就是这样：

 <ul id="megaUber" class="megaMenu">
   <li id="menu-item-34157" class="xyz-header-logo menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home ss-nav-menu-item-0 ss-nav-menu-item-depth-0 ss-nav-menu-reg um-flyout-align-center ss-nav-menu-with-img ss-nav-menu-notext">
      <a href="http://example.com/"><img class="um-img um-img-noresize" width="16" height="16" src="http://example.com/wp-content/uploads/abc.png" alt="Cat"></a>
   </li>
   <li>
       ... other menu items ....
   </li>
    .
    .
    .
</ul>

如果我通过浏览器的inspect元素添加一个简单的CSS规则'background：none'：

#megaMenu .ss-nav-menu-with-img.ss-nav-menu-notext > a > img, #megaMenu .ss-nav-menu-with-img.ss-nav-menu-notext > span.um-anchoremulator > img {
background:none;
    }

所有菜单项都会完全删除背景颜色（即使没有悬停），这是不可取的。

现在我的问题是，我可以使用什么CSS规则来专门定位'li'或'li'中的图像以移除悬停时的背景颜色（其他菜单项不应受到影响）？

上面代码中显示的“li”的ID为 menu-item-34157 。

我在尝试此操作时未能成功删除悬停时的背景：

    #menu-item-34157, #menu-item-34157:hover, #menu-item-34157:visited, #menu-item-34157:link, #menu-item-34157:active {
    background:none !important;
}

任何帮助都会得到真正的赞赏。

Answer 1

这样做，这应该有用。

ul.megaMenu li:first-child a:hover {background: none !important;}

删除Ubermenu项目上的悬停背景样式

1 个答案: