2

やあみんな、それを行うための最良の方法は何ですか：

私はリストを持っています

<ul>
    <li>hello</li>
    <li>good bye</li>
    <li>arrivederci</li>
    <li class="selected">dude</li>
    <li>whatever</li>
</ul>

最初に、1つのアイテムにすでに.selectedのクラスが適用されています。リストアイテムの1つにカーソルを合わせると、このアイテムに.selectedクラスが必要になります。したがって、すべてのアイテムには、imが終わったときにのみクラスを適用する必要があります。アイテムを離れるとすぐに、クラスが削除され、次のアイテムにクラスがあります。

4

3 に答える 3

8

あなたの説明から、私はあなたがこれを望んでいると思います：

$('ul > li').hover(function () {
    $(this).toggleClass('selected').siblings().removeClass('selected');
});

デモ： http： //jsfiddle.net/swN5F/

または、実際に必要なのは次のとおりです。

$('ul > li').mouseenter(function () {
    $(this).addClass('selected').siblings().removeClass('selected');
});

デモ： http： //jsfiddle.net/swN5F/1/（最後にホバーされたアイテムは赤のままであることに注意してください）

更新<ul>：複数のs、および上/下矢印キーで動作するバージョン：

var $activeUl = $('ul:first'); // For keyboard arrows

$('ul > li').mouseenter(function () {
    $(this).addClass('selected').siblings().removeClass('selected');
    $activeUl = $(this).parent();
});

$(document).keydown(function (e) {
    var direction, siblingsSelector;
    if (e.which == 38) { // up
        direction = 'prev';
        siblingsSelector = ':not(:first-child)';
    } else if (e.which == 40) { // down
        direction = 'next';
        siblingsSelector = ':not(:last-child)';
    }
    $activeUl.find('.selected')[direction]().addClass('selected')
        .siblings(siblingsSelector).removeClass('selected');
});

デモ： http： //jsfiddle.net/zBjrS/36/

于 2011-01-16T09:44:53.003 に答える
3

組み込みのブラウザ機能を使用してみませんか：

マークアップ：

<ul class="hoverUl">
    <li>hello</li>
    <li>good bye</li>
    <li>arrivederci</li>
    <li>dude</li>
    <li>whatever</li>
</ul>

CSS：

.hoverUl li { /* normal style */ }
.hoverUl li:hover { /* "selected" style */ }

最初は何も選択されないので、これはあなたが尋ねたものとは少し異なりますが、ホバーで選択した場合に何かを選択する必要があるのはなぜですか。

プレビュー

于 2011-01-16T09:48:38.313 に答える
2

jQueryを使用してそれを行うことができhoverます：

$("selector_for_your_ul li").hover(
    function() {
        $(this).addClass("selected").siblings("li").removeClass("selected");
    },
    function() {
        $(this).removeClass("selected");
    }
);

実例

これにより、「選択された」クラスがliマウスの上にあるクラスに切り替わり、マウスが1つliを離れて別のクラスに入らない場合は、クラスが削除されます（「選択された」クラスを持つクラスはありません）。それはあなたが望んでいたことだと思いますが、それらの1つが最初に「選択された」クラスをすでに持っていることとは一致しません。

誰かがマウスを上に置いたときに変更したいがli、マウスが別のマウスを入力せずに離れたときに削除したくないli場合は、次を使用しますmouseenter。

$("selector_for_your_ul li").mouseenter(
    function() {
        $(this).addClass("selected").siblings("li").removeClass("selected");
    }
);

実例

さまざまなリファレンスでイベントを検索すると、mouseenterIE固有であることがわかります。それは本当ですが、jQueryが他のブラウザでそれをエミュレートするほど便利です。

更新：必要に応じて、上記のに変更できsiblings("li")ますsiblings("li.selected")。例：

$(this).addClass("selected").siblings("li.selected").removeClass("selected");

それはそれを少し効率的にするかもしれません（すでにそれを持っている何かからクラスを削除しようとしないでください）。これを行うために更新された最初の例（with ）を次に示します。これを行うために更新された2番目の例（with ）を次に示します。hovermouseenter

オフトピック：ただし、必要な効果によっては、jQueryと「選択された」クラスではなくCSSを使用して実現できる場合があります。最後にハイライトしたままにするのではなくli（上記の例）、マウスが実際にその上にあるときにハイライトしたいだけの場合（上記の例）、IE6をサポートする必要がない場合は、CSS疑似クラスを使用してそれを行うことができます：hoverlimouseenter:hover

selector_for_your_ul li:hover {
    color: red; /* ...or whatever... */
}

実例しかし、繰り返しになりますが、これはホバー効果が必要な場合、およびIE6（要素のみを許可）をサポートする必要がない場合に限ります:hover。a

于 2011-01-16T09:44:52.760 に答える