0

mouseoutイベントを修正しようとしています。

私は要素を持っています

<div id="dropdown"></div>

イムがホバリングしたときに表示します。ただし、「。page_item.page-item-2」要素と#dropdown要素でmouseoutイベントが発生すると、それが消えるようにします。

これが私のJqueryコードです（完全には機能しません）

$(document).ready(function(){
$("#dropdown").css('display', 'none');
$(".page_item.page-item-2").hover(
            function() {
    $("#dropdown").fadeTo("fast", 1.0);

    });
    var s = $(".page_item.page-item-2").mouseout;
    var b = $("#dropdown").mouseout;
    if(s && b){
    $("#dropdown").fadeTo("fast", 0.0);
    }    
});

これには簡単な解決策があると確信しています。助けてください

4

2 に答える 2

3

なぜこれが機能しないのですか？

$(document).ready(function(){
    $("#dropdown").css('display', 'none');
    $(".page_item.page-item-2").mouseenter(function() {
        $("#dropdown").fadeTo("fast", 1.0);
    });
    $(".page_item.page-item-2").mouseout(function() {
        $("#dropdown").fadeTo("fast", 0.0);
    });
    $("#dropdown").mouseout(function() {
        $("#dropdown").fadeTo("fast", 0.0);
    });
});

編集：仕様が変更されたため（私たちの生活の話？）、これが私のソリューションの作り直しです。2つの要素間の関係が親子のように単純な場合、これは非常に簡単です...しかし、それらが遠い従兄弟である場合でも、以下のコードは機能するはずです。私はそれがあまり好きではありません...しかし、私はそれがうまくいくはずだと思います。

var mouseEnterCounter= 0; //allows FadeOuts when equal to zero
$(document).ready(function(){
    $("#dropdown").css('display', 'none');
    $(".page_item.page-item-2").mouseenter(function() {
        mouseEnterCounter++;
        $("#dropdown").fadeTo("fast", 1.0);
    });
    $("#dropdown").mouseenter(function() {
        mouseEnterCounter++;
    });
    $(".page_item.page-item-2").mouseout(function() {
        mouseEnterCounter--;
        if(mouseEnterCounter == 0)
            $("#dropdown").fadeTo("fast", 0.0);
    });
    $("#dropdown").mouseout(function() {
        mouseEnterCounter--;
        if(mouseEnterCounter == 0)
            $("#dropdown").fadeTo("fast", 0.0);
    });
});
于 2012-08-13T16:17:56.423 に答える
1

mouseoutイベントでタイムアウトを設定して、しばらくすると要素をフェードアウトさせることができます。また、mouseenterイベントが発生するたびにタイムアウトをリセットします。これが完全に機能する最小限の例です。

<div class="page_item page-item-2">Hello</div>
<div id="dropdown">World</div>

<script type="text/javascript"
    src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
    $("#dropdown").css('display', 'none');
    function clear_timeout() {
        clearTimeout($("#dropdown").data('timeout'));
        $("#dropdown").fadeIn("fast");
    }
    function set_timeout() {
        var timeout = setTimeout(function(){
            $("#dropdown").fadeOut("fast");
            $("#dropdown").css('display', 'none');
        }, 100);
        $("#dropdown").data('timeout', timeout);
    }
    $(".page_item.page-item-2").mouseenter(clear_timeout);
    $("#dropdown").mouseenter(clear_timeout);
    $(".page_item.page-item-2").mouseout(set_timeout);
    $("#dropdown").mouseout(set_timeout);
    });
</script>
于 2012-08-13T16:35:26.973 に答える