css - 删除 Ubermenu 元素上的悬停背景样式

Question

我有一张图片(准确地说是 Logo )作为 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>

如果我通过浏览器的检查元素添加一个简单的 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;}