Question

我有一个带有子菜单的Wordpress菜单。我在li元素中添加了一个箭头，里面有一个子菜单。当鼠标越过a内的li时，它会使用CSS制作悬停动画。现在我想将动画扩展到span标记内a元素内的箭头。我是用jQuery做的，

$('nav ul li.menu-item-has-children').hover(function() {
    $('nav ul li a span.arrow').css('color', '#fff');
}, function() {
    $('nav ul li a span.arrow').css('color', '#be1722');
});

但是当打开子菜单并且鼠标悬停在它上面时，箭头仍为白色。怎么能避免这个？

这是我菜单的结构：

<nav>
    <li class="menu-item-has-children">
        <a>Menu item with sub menu</a><span class="arrow">arrow</span>
        <ul>
            <li>
                <a>Sub menu link</a>
            </li>          
        </ul>
    </li>
</nav>

我也试过这个：

$('nav ul li.menu-item-has-children a').hover(function() {
    $('nav ul li a span.arrow').css('color', '#fff');
}, function() {
    $('nav ul li a span.arrow').css('color', '#be1722');
});

但如果我在子菜单中悬停a标签，则该功能会再次启动，箭头会变为白色。

任何人都可以帮助我吗？

Answer 1

您的元素是{"offset":1,"result":[{"host":"x.x.x.x","count":123"}]};。但是arrow中的span.arrow会搜索带有$('nav ul li a span.arrow')类的元素。并且没有为您的.arrow元素分配此类。

使用此：

<span>

选择器arrow搜索$('nav ul li a span.arrow')里面的 <a>。

span元素不是a 的孩子，而是其兄弟，请使用+而不是选择器中的空格。

$('nav ul li.menu-item-has-children a').hover(function() {
    $('nav ul li a+span.arrow').css('color', '#fff');
}, function() {
    $('nav ul li a+span.arrow').css('color', '#be1722');
});

参见 Next adjacent Selector (“prev + next”)

jQuery将鼠标悬停在排除元素子元素的li上

1 个答案: