0

次のリストがあります

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

しかし、できません。

どうすればできますか？

4

5 に答える 5

0

hoverこの関数を使用して二重に確認し、よりエキサイティングで楽しいものにするためにも使用します。

$('#myList li').not( ".item-selected" ).hover(
     function(){ 
         $(this).addClass('item-over'); 
     },
     function() {
          $(this).removeClass('item-over'); 
     }
);
于 2013-10-21T10:12:29.343 に答える
0

このハンドラーを見逃しているようですdoc ready。ドキュメントの準備ができているブロックに入れてみてください:

$(function(){
    $('#myList li:not(".item-selected")').mouseenter(function(){ 
        $(this).addClass('item-over'); 
    }).mouseleave(function() {
        $(this).removeClass('item-over'); 
    });
});
于 2013-10-21T10:14:55.960 に答える
0

イベント側では、コードは問題ないようです。

http://jsfiddle.net/F8rxJ/を見てください

これはコードです：

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

});

イベントが機能していることを示しています。

やろうとしている実際の作業で「ホバー」を使用してみてください。

于 2013-10-21T10:16:43.420 に答える
0

実際、これには 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-21T10:17:38.003 に答える