使用jquery时出现mouseenter和mouseleave问题

我有一个父div'a'，悬停该div时，将显示另一个div'B'，第二个div不是子div。它是一个单独的div。两个div都绝对定位

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

html代码

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

jQuery

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

});

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

我创造了一把小提琴。它是

---

还有其他技巧吗。请建议。提前谢谢。

您可以使用jQuery的悬停功能，它有两个参数，在mouseenter上做什么和在mouseleave上做什么。看起来是这样的， 剩余的逻辑可以放在这些函数中

$（“#id”）.hover（function（）{}，function（）{}）

以下是您想要的：

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

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

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

---

在阅读所有这些讨论时，您需要在鼠标位于div B上时显示div B，如果您正在执行基于div可见性的任何操作或在代码中的任何位置显示，则使用不透明方法

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

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

波蒂姆先生{ 位置：绝对位置； 宽度：200px； 高度：200px； 背景：#000； }

---

您的代码有两个问题：

隐藏元素不会触发

mouseenter

/

mouseleave

事件。要解决这个问题，可以使用不透明度，它具有很好的跨浏览器支持

portitem mouseover在OverlyGallery 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;
    }
});

---

不过，您可能需要重新考虑是否需要明确地执行此操作，也许更简单的方法也可以满足您的需要。

这是您正在寻找的一种非常奇怪的行为。使用JS的一些小技巧是可能的，但是你确定你需要这种行为吗？除了对第二个函数使用

visibility

之外，如果不修改你的代码，我看不到任何其他的可能性-@Prithviraj Mitra：你为什么不让它们成为父母和孩子呢？如果你只想在悬停状态下隐藏和显示，你甚至可以使用不透明度方法，这将非常容易。。。如果您离开OverlyGallery并在不离开portitem的情况下再次输入它，它将不会与此代码一起显示。@italy。。难道你们不觉得当我从外分区回到内分区时，它不会显示内分区吗？@Kasma，这不是他要求的。如果他愿意的话，这可以很容易地完成。非常感谢@Itay。是的，我现在已经明白了诀窍。****星星：）很漂亮，但OP希望鼠标穿过portitem时出现OverlyGallery，不是直接的过火。谢谢Kasma的想法。如果你能看到ltay的解决方案，那就是我要用的。谢谢Mahn的想法。事实上，它现在是用@ltay的解决方案解决的。如果你能看到他的小提琴，那就是我想要的。谢谢你的巨大努力。干杯。@PrithvirajMitra和他的方法，如果您离开黄色框并在不离开黑色框的情况下再次输入，它将不会再次出现。你知道吗？我的实现考虑到了这一点，这就是为什么它有点冗长。

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

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

.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;
}

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;
    }
});