2

親div 'A'があり、そのdivにカーソルを合わせると、別のdiv 'B'が表示され、この2番目のdivは子divではありません。これは別のdivです。両方のdivは絶対に配置されます。

マウスでは、「B」である2番目のdivを離れると消えるはずですが、消えていません.2番目のdivを離れると、まだ最初のdivの上にいるため、mousenter関数まだトリガーされています。

htmlコード

<div class="portitem">Some content</div>
<div class="overlaygallery"></div>

CSS

.portitem {
    position:absolute;
    width:200px;
    height:200px;
    background:#000;
}
.overlaygallery {
    background: none repeat scroll 0 0 rgba(255, 255, 204, 0.9);
    height: 150px;
    margin-left: 25px;
    margin-right: 15px;
    margin-top: 25px;
    position: absolute;
    width: 150px;
    z-index: 999;
    display:none;
}

jQuery

$('.portitem').mouseover(function () {
    $('.overlaygallery').css("display", "block");

});

$(".overlaygallery").mouseleave(function () {
    $(this).css("display", "none");
});

フィドルを作成しました。http://jsfiddle.net/squidraj/Gyn8c/です

他のトリックはありますか。提案してください。よろしくお願いします。

4

5 に答える 5

3

これがあなたが望んでいたものです：http://jsfiddle.net/Gyn8c/11/

私はそれらを親子にしなければなりませんでした。それは同じように見え、あなたが望むことをします。

$('.overlaygallery').mouseout(function () {
    $(this).hide();
});

$('.portitem').
    mouseenter(function () { $('.overlaygallery').show(); }).
    mouseleave(function () { $('.overlaygallery').hide(); });
于 2013-08-17T12:20:23.650 に答える
2

このすべての議論を読むと、マウスが div B にあるときに div B を表示する必要があり、div の可視性に基づいて何かを実行している場合、またはコード内の任意の場所に表示している場合は、不透明度アプローチを使用する必要があります。

$('.overlaygallery').hover(function () {
    $(this).stop().animate({
        opacity: 1
    });
},

function () {
    $(this).stop().animate({
        opacity: 0
    });
});

.portitem { 位置:絶対; 幅:200px; 高さ:200px; 背景:#000; }

.overlaygallery {
    background: none repeat scroll 0 0 rgba(255, 255, 204, 0.9);
    height: 150px;
    margin-left: 25px;
    margin-right: 15px;
    margin-top: 25px;
    position: absolute;
    width: 150px;
    z-index: 999;
    opacity :0;
}

デモ

于 2013-08-17T12:24:38.140 に答える
1

コードには 2 つの問題がありました。

  1. 非表示の要素は発生しませんmouseenter/mouseleaveイベント。これを回避するには、代わりに opacity を使用できます。これは、クロス ブラウザーのサポートが非常に優れています。
  2. portitem mouseover は、overlaygallery mouseleave の直後に実行されていたため、後者がそれ自体を非表示にしようとすると、portitem が再び表示されました。jQuery によって提供される eventData、具体的には property を使用して、これを回避できますtoElement。

それは少し冗長で、あまりエレガントではありませんが、私が正しく理解していれば、まさにあなたが望んでいたことを行います:

var cancelMouseOver = false;

$('.portitem').mouseenter(function (e) {
    if(!cancelMouseOver) {
        $('.overlaygallery').css("opacity", 1);
    } else {
        cancelMouseOver = false;
    }
});

$('.portitem').mouseleave(function (e) {
    $('.overlaygallery').css("opacity", 0);
});

$(".overlaygallery").mouseenter(function (e) {
    $(this).css("opacity", 1);
});

$(".overlaygallery").mouseleave(function (e) {
    $(this).css("opacity", 0);

    if($(e.toElement).hasClass("portitem")) {
        cancelMouseOver = true;
    }
});

デモ

ただし、これが明示的に必要かどうかを再検討することをお勧めします。おそらく、必要なものに対してはより単純なアプローチでも十分です。

于 2013-08-17T12:39:07.293 に答える