Question

我需要触发一个位于另一个顶部的两个DIV的鼠标悬停事件。

对于前面的DIV，如果我已经给出pointer-events:none;，我将在下面获得DIV的鼠标悬停事件。但是这会停止在前面触发DIV的鼠标悬停事件。

的Javascript

$(function () {
    var stopAnimation = false;
    var loop1 = setInterval(function () {
        if(stopAnimation)return;
        var L = parseInt($("#back").css("left"), 10) + 10;
        if(L > $(window).width())L=-300;
        $("#back").css("left", L);
    }, 100);
    $("#back").mouseover(function () {
        stopAnimation = true;
    });
    $("#back").mouseout(function () {
        stopAnimation = false;
    });
    $("#front").mouseover(function () {
        $("#front").animate({width:200}, 100);
    });
    $("#front").mouseout(function () {
        $("#front").animate({width:100}, 100);
    });
});

CSS

#back {
    width: 300px;
    height: 200px;
    background-color: #aaa;
    position: absolute;
    left:0;
    cursor: pointer;
}
#front {
    width: 100px;
    height: 100px;
    background-color: #caa;
    position: absolute;
    left:0;
    top:100px;
    border-radius:50%;
    overflow:hidden;
}
body {
    margin:0;
}

HTML

<div id="main">
    <div id="back"></div>
    <div id="front"></div>
</div>

Answer 1

不知道这是否适合您要实现的目标，但是当您点击div时切换z-index怎么办？

首先显示div.front。点击div.front后，它会调用您的函数并将div.front移到后面，div.back移到前面，这样您就可以点击并触发div.back功能了再次切换div。

所以要清楚......正面可见＆gt;点击＆gt;返回可见＆gt;点击＆gt;前方可见等。

鼠标悬停两个DIV的事件，一个位于另一个之上

1 个答案: