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

Question

我有一个带有子菜单的Wordpress菜单。 我在li元素中添加了一个箭头，里面有一个子菜单。 当鼠标越过a内li它与CSS的悬停动画。 现在我想将动画扩展到a标签内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')搜索<span> inside（child of） <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');
});

请参阅下一个相邻选择器（“prev + next”）