0

同様の質問を検索して、自分の状況に合わせてそれらの回答を使用しようとしましたが、間違っているか (おそらく...)、それとも私が必要としているものではありませんか?

基本的に、#b-hover-nav にカーソルを合わせたときに .block-5 を切り替えようとしています。ただし、ユーザーがリンクを読み取ったり操作したりできるように、.block-5を開いたままにしておきたい...例の他のリンクについても同じ...

私はjsfiddleに投稿しました（http://jsfiddle.net/9fcFv/）が、以下にも含めています：

#content {
     width: 400px;
    height: 400px;
}
span.button-hover-nav {
 display: block;
 clear: both;  
  width: 200px;    
    margin-bottom: 20px;
}
.left {
      width: 200px;
      float: left;
}
.block-5 {
     display: none;
    width: 200px;
    float: right;
}
.block-5 a {
     color: blue;
}
.block-6 {
     display: none;
    width: 200px;
    float: right;
}
.block-6 a {
     color: green;
}

​
<div class="body">
 <span class="button-hover-nav" id="b-hover-nav">Hover Me</span>
</div>

<div class="block-5">
<h1>Please stay open unless I leave...</h1>
<a link="#">Click Me</a>
</div>

//Totally does not work:
// Bind the mouse over /out to the first DIV.
            $('#b-hover-nav').live('mouseenter', function() {
        $('.block-5').show();
    }).live('mouseleave', function() {
        t = setTimeOut(function() {
            $('.block-5').hide();
        }, 100);
    });

    $('.block-5').live('mouseenter', function() {
        if(t) {
            clearTimeout(t);
            t=null;
        }
    });
4

1 に答える 1

1

あなたが抱えている問題は、ボタンのmouseoutイベントがトリガーされる前に、ユーザーがマウスをオブジェクトに移動する時間がないという事実によって引き起こされます。あなたは彼らにマウスでそこに着くために少し時間を与える必要があります。

また、jQueryの組み込みのホバーメソッドが好きです。ただし、必要に応じてバインディングを使用できます。

JSFiddle

var timer1,timer2;
var delay=1000;
$("#b-hover-nav").hover(function() {
    clearTimeout(timer1);
    $('.block-6').hide();
    $('.block-5').show();
}, function() {
    timer1= setTimeout(function() {
        $('.block-5').hide();
    }, delay);
});

$("#c-hover-nav").hover(function() {
    clearTimeout(timer2);
    $('.block-5').hide();
    $('.block-6').show();
}, function() {
    timer2= setTimeout(function() {
        $('.block-6').hide();
    }, delay);
});

$(".block-6").hover(function() {
    clearTimeout(timer2);
}, function() {
    timer2= setTimeout(function() {
        $('.block-6').hide();
    }, delay);
});

$(".block-5").hover(function() {
    clearTimeout(timer1);
}, function() {
    timer1= setTimeout(function() {
        $('.block-5').hide();
    }, 2000);
});

</ p>

于 2012-09-27T21:50:49.663 に答える