jQuery将鼠标悬停在不包含子元素的子元素上

Question

我有一个包含子菜单的Wordpress菜单。我添加了一个箭头到内部有子菜单的li元素。当鼠标移过li内的a时，它会用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 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标签功能再次启动和箭头会变成：

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

我这个也试过白色。

任何人都可以帮助我吗？

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