我有一张图片(准确地说是 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;
}
我们将不胜感激任何帮助。
最佳答案
这样做,这应该有效。
ul.megaMenu li:first-child a:hover {background: none !important;}
关于css - 删除 Ubermenu 元素上的悬停背景样式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23481633/