Question

我有一个WordPress网站（在我的localhost上），它使用<ul>作为自定义菜单。如果它有<li>子菜单，如何在悬停 时更改<ul>的CSS？

所有主菜单项都有border-radius，我想在当前项目（下面的Services）中删除它，例如：

<div class="main-nav"> <ul class="menu" id="menu-main-nav"> <li><a href="#">Home</a></li> <li><a href="#">Services</a> <ul class="sub-menu"> <li><a href="#">Item One</a></li> <li><a href="#>Item Two</a></li> </ul> </li> <li><a href="#>Contact</a></li> </ul> </div>

我找不到CSS解决方案，我也试过jQuery：

$('ul.sub-menu').parent().hover(function(){ $(this).addClass('no-radius'); });

Answer 1

$('.menu li').has('ul').hover(function() {
    $(this).addClass('hover');
}, function() {
    $(this).removeClass('hover');
});

Answer 2

$(".menu LI").hover(
    function() {
        if ($("UL", $(this)).length > 0) {
            $(this).addClass("no-radius");
        }
    },
    function() {
        $(this).removeClass("no-radius");
    }
);

Answer 3

这有用吗：

$("li").hover(function(){
if($(this).parent().hasClass("sub-menu") {
 $(this).css("color", "red");
}
});

Answer 4

$('li>ul.sub-menu').hover(function() {
    $(this).addClass('no-radius');
}, function() {
   $(this).removeClass('no-radius');
});

在您的解决方案中this引用ul项而不是其父项。

相反，这段代码会检查li是否有ul的直接子级，其中class = sub-menu，然后将所需的类应用于li元素。< / p>

希望它有所帮助，

干杯！

Answer 5

$('ul.sub-menu').parent().hover(function(){
    $(this).parent().addClass('no-radius');
});

您始终可以使用console.debug（$（this））来检查您正在访问的元素

如何在Hover </li>上更改父<li>的样式

5 个答案: