Блог

Предполагая, что у меня есть следующий 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, предполагается изменить цвет шрифта обратно на серый, за исключением элемента A, родительский элемент LI которого имеет значение класса ‘active’.

Ниже приведен код jQuery, который я пытаюсь использовать: (Функция ‘mouseleave’ не работает)

         $(".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');
        });
  

$(this).parent() выбирает li элемент, и все остальные функции применяются к этому, а не к a элементу.

Вы можете сделать:

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

ДЕМОНСТРАЦИЯ

Попробуйте использовать .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']");
  

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

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

  }, 

  function () {

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

  });