3

ブロックが点滅している.hover()

これが完全な例です-http ://jsfiddle.net/xBEjQ/

これを修正する方法は?

UPD:マウスがブロックではなく、小さいブロック.image)を離れた後、ポップアップを削除する必要があり.popupます。

4

4 に答える 4

6

更新された質問の場合:マウスイベントはその小さな要素では発生しないため(完全にオーバーラップしている)、次のような3番目の要素を使用する必要があります。 <div>

<div class="block">
    <div class="popup"></div>
    <div class="popup upper"></div>
    <div class="image"></div>
</div>

そして、このCSSを追加します(z-index他よりも高いことに注意してください.popup):

.upper { width: 100px; height: 100px; z-index: 41; }

一致するスクリプト:

$(".block .image").mouseenter(function(){
    console.log($(this).siblings(".popup").length);
  $(this).siblings(".popup").show();
});
$(".block .upper").mouseleave(function(){
  $(this).siblings(".popup").andSelf().hide();
});

ここでテストできます


前の質問の場合:ポップアップは要素の上にあるので、次のようmouseenterに、トリガーでmouseleave、ポップアップでを使用します。

$(".block .image").mouseenter(function(){
  $(this).siblings(".popup").show();
});
$(".block .popup").mouseleave(function(){
  $(this).hide();
});

ここでテストできます

于 2010-11-05T22:54:41.697 に答える
1

jsfiddleを更新しました:http://jsfiddle.net/xBEjQ/6/

HTML

<div class="block">
    <div class="popup"></div>
    <div class="image"></div>
</div>

jQuery

$(".block .image").mouseover(function(){
    $(this).parent().find(".popup").show();
});

$(".block .popup").mouseout(function() {
    $(this).hide();
});

CSS

.block { position: relative; width: 400px; height: 400px; background: #ccc; }
.popup { display: none;
    position: absolute; left: 0; top: 0; width: 200px; height: 200px; background: #eee; z-index: 40; }
.image { position: relative; width: 100px; height: 100px; background: #aaa; z-index: 30;
于 2010-11-05T22:54:37.833 に答える
1

マウスオーバーでポップアップを表示するポップオーバーのマウスアウトでポップアップを非表示にする

http://jsfiddle.net/generalhenry/WkH6q/

于 2010-11-05T22:57:19.543 に答える
0
$(".block .image").mouseover(
    function(){
        $(this).parent().find(".popup").show();
    }
);
$(".block .popup").mouseout(
    function(){
        $(this).hide();
    }
);

これは、「画像」の上に「ポップアップ」がある場合にのみ適用されます。点滅している理由は、「ポップアップ」が表示されるとすぐに、「画像」の「マウスアウト」がトリガーされ、「ポップアップ」が非表示になるためです。

「ポップアップ」が「画像」の上に配置されていない限り、コードは正常に機能します。

于 2010-11-05T22:56:02.087 に答える