0

良い一日、

これらの div(s) コンテナーには、(a) 画像と (b) テキストの説明をそれぞれ保持する 2 つの内部 div(s) があります。

ページの読み込み時に .hide() を使用してこれらの (b) テキスト説明 div を非表示にし、次に .hover() を使用して非表示のテキスト説明 div を表示/非表示にします。以下のサンプル コード:

<div class="projectBlock">
<div class="imgBlock" id="imgBlock1"><a href="http://www.tesco.com.my" target="_blank"><img src="http://i23.photobucket.com/albums/b395/yiyonglee/thumb-project-tesco.jpg"></a>

</div>
<div class="descBlock" id="descBlock1">Tesco Malaysia</div>

表示/非表示は正常に機能しますが、マウスオーバー領域が説明テキスト領域内のどこかにヒットした場合を除いて、移動中に div コンテナーがちらつきます。

私のjQuery部分：

$('.descBlock').hide();

$('#imgBlock1').hover(function () {
    $('#descBlock1').show();
}, function () {
    $('#descBlock1').hide();
});

$('#imgBlock2').hover(function () {
    $('#descBlock2').show();
}, function () {
    $('#descBlock2').hide();
});

ここでのデモ: jsfiddle

なぜそのように振る舞うのでしょうか。前もって感謝します。

4

2 に答える 2

4

代わりにこれを入力してください：

jsフィドル

$('.descBlock').hide();

$('.projectBlock').hover(function () {
    $(this).find('.descBlock').show();
}, function () {
    $(this).find('.descBlock').hide();
});

すべての projectBlock 要素に影響を与えるには、一度だけ実行する必要があります。

于 2013-08-11T14:36:34.827 に答える
0

簡単に言えば、オーバーレイ ブロック descBlock{1|2} が、マウス イベントを監視している大きなブロックを覆い隠しているためです。

これがあなたが望むものであるかどうかを確認してください

別の hover() リスナーを配置し、そのコールバックにマウスが入っているか出ているかに関係なく子ブロックを表示させることによって。私は descBlock1 に対してのみ行ったので、コントラストを見ることができます。

$('#descBlock1').hover(function () {
 $('#descBlock1').show();
}, function () {
 $('#descBlock1').show();   
});
于 2013-08-11T14:49:31.080 に答える