jquery - mouseout イベント jquery で前の状態に戻る

Question

私はこのフィドルを持っています: http://jsfiddle.net/27bvG/

このショーは、マウスオーバーで "hidden" li を表示し、表示されたままにします。私は Jquery にあまり熟練していないので、助けが必要です。マウスアウトで前の状態に戻り、「さらに2つ」を再度表示するにはどうすればよいですか?

ありがとうございます！

Answer 1

これを行うには、「2 つ以上」の LI にカーソルを合わせて表示する LIのmouseoverおよびイベントを処理します。mouseout以下のコードを参照してください。

このデモを確認してください: http://jsfiddle.net/27bvG/8/

HTML

<ul id="tricky_list">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li class="onmore">Item 4</li>
<li class="onmore">Item 5</li>
</ul>

JS

var hideTimer = -1;
$("#tricky_list li.more").on("mouseover", function(){
    $("#tricky_list li.onmore").show();
    $("#tricky_list li.more").hide()
});
$("#tricky_list li.onmore").on("mouseover", function(){
    clearTimeout(hideTimer);
    hideTimer = -1;
});
$("#tricky_list li.onmore").on("mouseout", function(){
    hideTimer = setTimeout(function() {
        $("#tricky_list li.more").show();
        $("#tricky_list li.onmore").hide();
        hideTimer = -1;
    }, 1000);
});

Answer 2

あなたはそのようなことをすることができます

     $("#tricky_list li.more").hover(
        function () {
           // hover function       
        }

     },
        function () {
         // unhover function
       }
    );

ホバー機能では別のリーを表示でき、アンホバーでは再び非表示にできます。