8

この JQuery コードに問題があります。

$(".item").mouseenter(function(){
    $(this).addClass("active");
    $(this).removeClass("item");
    $(".item").hide(700);
}).mouseleave(function(){
    $(this).stop();
    $(this).addClass("item");
    $(this).removeClass("active");
    $(".item").show(700);
});

これは私のHTMLです：

<ul>
    <li class="item">Item</li>
    <li class="item">Item</li>
    <li class="item">Item</li>
    <li class="item">Item</li>
    <li class="item">Item</li>
</ul>

あるアイテムにホバーすると他のアイテムが非表示になり、コードは正常に動作しますが、非表示の期間 (700 ミリ秒) に別のアイテムにホバーすると問題が発生し、非表示/表示アイテムのループが発生します。これを防ぐために私は何ができますか。

jsフィドル

注：ホバーされたアイテムが固定されたままではなく、左に移動することを望みます。

4

1 に答える 1

3

要素に使用float: leftしていたので、幅と高さはありませんでした。この CSS を適用します。liul

ul {
    overflow: auto;
}

また、jQueryにいくつかの変更を加えました：

$(".item").on('mouseenter', mEnter)
$('ul').on('mouseleave', function () {
    $('.item').stop();
    $('.active').removeClass("active")
        .addClass("item");
    $(".item").show(700);
});

function mEnter() {
    $(this).addClass("active");
    $(this).removeClass("item");
    $(".item").hide(700);
}

親要素ではなく、mouseleaveホバーされた個々の要素にイベントを適用していました。LIUL

働くフィドル

于 2013-11-02T17:10:59.850 に答える