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

Question

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

http://jsfiddle.net/hvh8k/

对于前面的 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。

所以要清楚...正面可见>点击>背面可见>点击>正面可见等