Question

我有以下列表

<ul id='myList'>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li class='item-selected'>Item 4</li>
    <li>Item 5</li>
    <li>Item 6</li>
    <li>Item 7</li>
</ul>

我想在item-over上添加课程mouseenter，并希望删除课程item-over

mouseleave没有包含类item-selected

的项目

我试过了

$('#myList li:not(".item-selected")')
    .mouseenter(function(){ 
         $(this).addClass('item-over'); 
    })
    .mouseleave(function() {
         $(this).removeClass('item-over'); 
    });

但无法。

怎么办？

Answer 1

我会使用这个功能来加倍确定，我还会使用hover来让它变得更加刺激和有趣：

$('#myList li').not( ".item-selected" ).hover(
     function(){ 
         $(this).addClass('item-over'); 
     },
     function() {
          $(this).removeClass('item-over'); 
     }
);

Answer 2

您似乎错过了doc ready处理程序，尝试将其放入文档就绪块中：

$(function(){
    $('#myList li:not(".item-selected")').mouseenter(function(){ 
        $(this).addClass('item-over'); 
    }).mouseleave(function() {
        $(this).removeClass('item-over'); 
    });
});

Answer 3

在活动方面，您的代码似乎很好。

查看http://jsfiddle.net/F8rxJ/

这是代码：

$(document).ready(function () {
    $('#myList li:not(".item-selected")').bind('click',function(){
        alert('xxx');            
    });

});

它向您显示该事件正在发挥作用。

尝试在您尝试的实际工作中使用“悬停”。

Answer 4

实际上你不需要JavaScript。

#myList li {
    &:hover {
        color: blue;
    }

    &.item-selected,
    &.item-selected:hover {
        color: red;
    }
}

http://jsfiddle.net/f0t0n/xGqeE/

或IE＆gt; = 8

#myList li {
    &:hover:not(.item-selected) {
        color: blue;
    }

    &.item-selected {
        color: red;
    }
}

http://jsfiddle.net/f0t0n/LBULM/

Answer 5

这是有效的

$('#myList li:not(".item-selected")')
    .mouseenter(function(){ 
         if(!$(this).hasClass("item-selected")) //added this line
             $(this).addClass('item-over'); 
    })
    .mouseleave(function() {
         $(this).removeClass('item-over'); 
    });

列表项选择器没有具有特定类的项

5 个答案: