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代码:('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');
        });

Answer 1

尝试使用.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 2

$(this).parent()选择li元素，所有其他函数都适用于此元素，而不是a元素。

你可以这样做：

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

DEMO

Answer 3

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

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

  }, 

  function () {

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

  });

选择其父元素没有特定类的元素

3 个答案: