0

我正在使用jQuery Color 插件将菜单fadeIn()设置为白色背景色，然后fadeOut()设置为透明色。

我知道它正在淡出，因为悬停功能正在离开应用了动画的元素，但是当你进入子导航列表时，有没有办法让主菜单项上的背景颜色保持活动状态？

当我的悬停在 css 中时，我第一次有这个工作，但是从添加一个 jQuery 动画它现在坏了。

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

这是一些支持我的问题的代码：

Nav的典型布局

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

CSS： ul#nav-1 li { 位置：相对；显示：内联块；边距：0；}

ul#nav-1 li span, ul#nav-1 li a {
padding:18px 13px;
font-size:14px;
color:#2e2e2e;
display:block;
}

ul#nav-1 ul.sub-menu {
position:absolute;
top:58px;
list-style: none;   
z-index:1;
text-align:left;
}

ul#nav-1 ul.sub-menu li {
display:block;
margin: 0;
}

ul#nav-1 ul.sub-menu li a { 
border-bottom:1px solid #dbddd4;
background-color:#f2f2f2;
width:220px;
display: block;
padding: 13px 0px 13px 18px;
}

用于背景的 Jquery 动画：

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

2 回答 2

0

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

如果您使用的是 SASS：

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

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

参考：CSS3 过渡

于 2013-08-02T10:10:39.410 回答
0

我认为您只需要更改选择器，以便mouseleave事件仅在您离开父级后触发li：

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

这是一个小提琴

如果您只希望动画发生在父级（ theli或 the 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' });                           
});

所以检查悬停的元素是否包含 a .sub-menu，如果有，将动画应用到紧接在 之前的元素.sub-menu，如果没有，将其应用到li.

这是另一个小提琴

于 2013-08-02T09:21:41.243 回答