Question

我有一个父div'A'并且在盘旋时div将显示另一个div'B'并且这第二个div不是一个子div.It是一个单独的div.Both div绝对定位。

鼠标离开第二个div，即'B'，它应该消失。但它不会消失。实际上我不确定是否可能，因为当你离开第二个div时你仍然在第一个div上，这就是为什么鼠标中继功能仍然被触发。

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/

还有其他的伎俩。请建议。谢谢。

Answer 1

这是你想要的：http://jsfiddle.net/Gyn8c/11/

我必须让他们成为父母和孩子。看起来一样，做你想做的事。

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

$('.portitem').
    mouseenter(function () { $('.overlaygallery').show(); }).
    mouseleave(function () { $('.overlaygallery').hide(); });

Answer 2

阅读所有这些讨论看起来，当鼠标在div B上时你需要显示div B，然后如果你根据div可见性执行任何操作或者在代码中的任何地方显示，则需要使用不透明方法。

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

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

.portitem { 位置：绝对的; 宽度：200像素; 高度：200像素; 背景：＃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;
}

demo

Answer 3

您的代码存在两个问题：

隐藏元素不会触发mouseenter / mouseleave个事件。要解决这个问题，可以使用不透明度，它具有相当好的跨浏览器支持。
portitem mouseover在overlaygallery mouseleave之后立即运行，所以当后者试图隐藏自己时，portitem会再次显示它。您可以使用jQuery提供的eventData解决此问题，特别是属性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;
    }
});

<强> DEMO

您可能想重新考虑是否需要明确这一点，或许更简单的方法也可以满足您的需求。

Answer 4

你可以使用jQuery的悬停功能，它有2个参数，在mouseenter上做什么以及在mouseleave上做什么。它看起来像这样，剩下的逻辑可以放在这些函数中。

$（ “＃标识”）。悬停（函数（）{}，函数（）{}）

Answer 5

$('.portitem').hover(function () {
    $('.overlaygallery').css("display", "block");
    },function () {
    $('.overlaygallery').css("display", "none");
});

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

使用jquery的mouseenter和mouseleave问题

5 个答案: