列表項選擇不具有特定類項目

我有以下列表列表項選擇不具有特定類項目

<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>

我想在mouseenter添加item-over類，並希望刪除item-over類上

mouseleave無項目擁有一流的item-selected

我試過

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

但無法。

怎麼辦？

來源

2013-10-21 Salim

'：懸停'在CSS不工作？ – Abhitalks

您的代碼可以在小提琴中正常工作：http://jsfiddle.net/RoryMcCrossan/uLYXf/。這個問題可能在於你的代碼中的其他地方，可能在'.item-over'規則的CSS中。 –

'li'元素是否是動態創建的...是dom就緒處理程序下的代碼 –

我想使用的功能，爲了以防萬一，我還用hover，使其更令人興奮和有趣：

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

來源

2013-10-21 10:12:29

謝謝，你的答案應該可行，但不適用於我的大腳本和動態創建的列表。我做了http://stackoverflow.com/a/19492779/2459296 – Salim

似乎什麼，你已經錯過了doc ready處理程序這一點，嘗試把它在文檔就緒區塊：

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

來源

2013-10-21 10:14:55 Jai

謝謝，你的答案應該工作，但不能在我的大腳本和動態創建列表中工作。我做了http://stackoverflow.com/a/19492779/2459296 – Salim

你應該早就提到它（動態創建）。 – Jai

它看起來像你的代碼就好了，在事件方面。

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

這是代碼：

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

});

它表明你該事件工作。

嘗試在您嘗試執行的實際工作中使用「懸停」。

來源

2013-10-21 10:16:43

謝謝，你的答案應該可以工作，但不適用於我的大腳本和動態創建的列表。我這樣做http://stackoverflow.com/a/19492779/2459296 – Salim

其實你不需要爲此的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/

來源

2013-10-21 10:17:38

謝謝，不錯的答案，我會嘗試它，但發現使用jQuery，我做到了http://stackoverflow.com/a/19492779/2459296 – Salim

這是工作

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

來源

2013-10-21 11:03:15 Salim

列表項選擇不具有特定類項目

回答

相關問題