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

Question

我有一个带有子菜单的 Wordpress 菜单。我在li 元素中添加了一个箭头，该元素内部有一个子菜单。当鼠标经过li 内的a 时，它会使用CSS 制作悬停动画。现在我想将动画扩展到 span 标签内的 span 元素内的箭头。我用 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

您的元素是<span>arrow</span>;。但是span.arrow 在$('nav ul li a span.arrow') 中搜索<span> 元素，其类为.arrow。并且没有为您的 <span> 元素分配这样的类。

使用这个：

<span class="arrow">arrow</span>

---

选择器$('nav ul li a span.arrow') 在<a> 内部（子级）搜索<span>。

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”)