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

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

这是有效的

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

Answer 2

我会使用该功能来加倍确定，我也会使用hover它来使它更令人兴奋和有趣：

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

Answer 3

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

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

Answer 4

在事件方面，您的代码似乎很好。

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

这是代码：

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

});

它向您表明该事件正在运行。

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

Answer 5

实际上，您不需要 JavaScript。

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

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

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

---

或者对于 IE >= 8

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

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

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