Question

下一段代码不起作用，我找不到原因。动画效果很好，但a:not(active)部分无效。

<div id="SDS-menu-wrapper">
        <ul id="SDS-menu">
         <li id="SDS-m-1" class="SDS-menu-li"><a href="#">item a</a></li>
         <li id="SDS-m-2" class="SDS-menu-li"><a href="#">item b</a></li>
         <li id="SDS-m-3" class="SDS-menu-li"><a href="#">item c</a></li>
         <li id="SDS-m-4" class="SDS-menu-li"><a href="#">item d</a></li>
        </ul>
    </div>



jQuery(document).ready(function() {


jQuery('[id^=SDS-m-]').click(function() {
    var m_index = this.id.replace('SDS-m-', '');
    jQuery( "#SDS-menu .SDS-menu-li a" ).removeClass( "active" );
    jQuery( "#SDS-m-"+m_index+" a" ).addClass( "active" );
});



jQuery('#SDS-menu li a:not(active)').hover(function() {
jQuery(this).stop().animate({ top: -4 }, 100, "easeOutBounce");
}, function() { jQ(this).stop().animate({ top: 0 }, 400, "easeOutBounce");
});

});

Answer 1

错字

jQuery('#SDS-menu li a:not(.active)').hover(function() {
                           ^ added . here for class selector

参考

:not()

class selector

Answer 2

这是解决方案：

jQuery(document).on({
    mouseenter: function () {   
                    jQuery(this).stop().animate({ top: -3 }, 100, "easeOutBounce");
                },
    mouseleave: function () {
                    jQuery(this).stop().animate({ top: 3 }, 400, "easeOutBounce");
                }
}, "#SDS-menu li a:not(.active)");

jquery not（active）不起作用

2 个答案: