jQuery bgColor动画：在下一个子菜单时保持活动状态

我正在使用将菜单

fadeIn（）

设置为白色背景色，然后将

fadeOut（）

设置为透明

我知道，当鼠标悬停功能离开应用了动画的元素时，背景颜色会逐渐淡出，但是当您进入sub nav列表时，有没有办法保持主菜单项上的背景颜色处于活动状态

当我的鼠标悬停在css中时，我第一次使用它，但由于添加了jQuery动画，它现在坏了

有人能建议我的jQuery或CSS是否需要更多地实现这个问题吗

下面是一些代码来支持我的问题：

导航的典型布局

 <ul id="nav-1">
     <li class="<span>Main Nav Link</span>
        <ul class="sub-menu">
           <li>Sub-Nav-1</li>            
           <li>Sub-Nav-2</li>
           <li>Sub-Nav-3</li>
        </ul>
      </li>
     <li>Another Link</liv>
  </ul>

背景的Jquery动画：

('ul#nav-1 li span, ul#nav-1 li').hover(function(){
        $(this).animate({backgroundColor: '#FFF'}, 'slow');
}, function(){
        $(this).animate({backgroundColor:"transparent"}, 'slow');
});

---

我认为您只需要更改选择器，以便只有在您离开父级

li

后才会触发

mouseleave

事件：

$('#nav-1 > li').hover(function(){
    $(this).stop().animate({backgroundColor: '#FFF'}, 'slow');
}, function(){
    $(this).stop().animate({backgroundColor: 'transparent'}, 'slow');
});

如果只希望动画出现在父对象上（即

li

或

span

），则需要做一些更详细的操作：

var $el, $this;
$('#nav-1 > li').hover(function() {
    $this = $(this);
    $el = ($this.has('ul.sub-menu').length) ? $this.find('ul.sub-menu').prev() : $this; 
    $el.stop().animate({ backgroundColor: '#FFF' });
}, function() {
    $el.stop().animate({ backgroundColor: 'transparent' });                           
});

因此，请检查悬停的元素是否包含

.sub-menu

，如果包含，请将动画应用于紧靠

.sub-menu

之前的元素，如果不包含，请将动画应用于

li

---

或者，您可以使用CSS3轻松地解决此问题

如果您正在使用SASS：

ul#nav-1 li:hover{
   @include transition-property(background);
   @include transition-duration(500);
   background-color: #FFF
}

不需要jQuery，这将解决您的问题

---

参考资料：

您应该为此类问题提供一个JSFIDLE

ul#nav-1 li:hover{
   @include transition-property(background);
   @include transition-duration(500);
   background-color: #FFF
}