選擇元素的父元素不具有特定的類

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'); 

    });