2

我有一个父 div 'A' 并且在悬停该 div 时会显示另一个 div 'B' 并且第二个 div 不是子 div。它是一个单独的 div。两个 div 都是绝对定位的。

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

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

您的代码有两个问题：

  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 回答
0

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

$("#id").hover(function(){},function(){})

于 2013-08-17T12:08:35.957 回答
0 
$('.portitem').hover(function () {
    $('.overlaygallery').css("display", "block");
    },function () {
    $('.overlaygallery').css("display", "none");
});

$('.overlaygallery').mouseout(function () {
    $(this).hide();
});
于 2013-08-17T12:13:44.897 回答