选择元素的父元素不具有特定的类

Question

假设，我有以下HTML：

<ul class="topnav"> 
    <li class=""><a href="/">Page 1</a></li> 
    <li class=""><a href="/Page2/">Page 2</a></li> 
    <li class=""><a href="/Page3/">Page 3</a></li> 
    <li class=""><a href="/Page4/">Page 4</a></li> 
    <li class=""><a href="/Page5/">Page 5</a></li> 
    <li class="active"><a href="/Page6/">Page 6</a></li> 
</ul> 

当鼠标离开LI元件，它是假设改变字体的颜色回到灰色除了父元素LI的类值为“active”的A元素。

下面是jQuery代码我想：（该“鼠标离开”功能无法正常工作）

 $(".top_nav li a").mouseenter(
      function() { 
       $(this).stop().animate({'color': '#ffffff'}, 'slow'); 
     }); 

     $(".top_nav li a").mouseleave(
      function() { 
       $(this).parent().not(".active").stop().animate({'color': '#a5acb2'}, 'slow'); 
     }); 

Answer 1

$(this).parent()选择li元件和所有其他功能应用到这一个不是到a元件。

你可以这样做：

$(this).not(".active > a").stop()... 

DEMO

Answer 2

尝试使用.hasClass()：

if($(this).parent().hasClass("active")) { 
    $(this).stop().animate({'color': '#a5acb2'}, 'slow'); 
} 

如果你的列表中的项目只能被分配一个类，你可以这样做：

// class not equals 'active' 
$(this).parent("[class!='active']"); 

否则，这应该工作：

// class contains 'active' 
$(this).parent("[class*='active']"); 

Answer 3

$(".top_nav li a").hover( function() { 

    $(this).stop().animate({'color': '#ffffff'}, 'slow'); 

    }, 

    function() { 

    $(this).parent().not(".active").stop().animate({'color': '#a5acb2'}, 'slow'); 

    });