Jquery mouseover 和 z-index：什么决定了哪个元素在“顶部”？

Question

我正在开发一款需要大地图的游戏。我所做的是在 z-index 为 1 的可滚动 div (scrollWindow) 的背景中设置大的 12k x 12k 像素图。

稍后，Ajax 调用返回一些 JSON 数据，这些数据在大型背景地图中添加了许多类 (City_Palace)。元素的 z-index 为 9。

我还设置了几个鼠标悬停事件，这些事件根据光标是在背景中的地图上还是在其上绘制的城市之一上执行不同的操作。然而，即使城市的 z-index 远高于主窗口的 z-index，该事件也不会因为城市鼠标悬停而触发，因为可滚动窗口位于“顶部”。

当涉及到鼠标事件时，jquery 使用什么标准来确定哪个 div 位于“顶部”？好像z-index不是这样的。

这里有一些代码：

CSS：

#scrollWindow {
    width: 1970px;
    height: 900px;
    overflow: scroll;
    border: solid black 3px;
    position: absolute;
    z-index:1;
}

.City_Palace {
    height: 20px;
    width: 20px;
    position: absolute;
    z-index: 9;
    background-image: url("../Images/City_Palace.png");
    background-size: 100% 100%;

}

jquery：

$('.City_Palace').mouseover(function() {
    alert("city classes on top");
});


$("#scrollWindow").mousemove(function(e){
    alert("scroll window on top");
});

HTML 的生成方式如下：

<div id="scrollWindow" class="ui-widget-content" style="width: 2105px;">
    <img id="img" src="../Images/fullSizeMap.png">
    <div class="City_Palace" value="coast" style="left: 780px; top: 540px;"></div>
</div>

我猜想不知何故，父子关系覆盖了 z-index。关于如何解决这个问题的任何建议？谢谢！

Answer 1

如果你像这样查看 dom 结构：

<div class="parent">
    <div>
        <div class="top">
        </div>
    </div>
</div>
<div class="laterindom"></div>

z-index 取决于布局/样式。

位于其他元素之前的元素在 z-index 层次结构中位于它们“下方”，除非您为它们指定 z-index。

元素“在”另一个元素（如 class="top" 元素）在 z-index 中位于其父元素之上，但默认情况下 mouseover 事件将在 dom 中冒泡，因此如果您将 mouseover 事件附加到“父”类，你的方法也会被调用，因为它会冒泡，即使“顶部”元素在“父”元素的“上方”:)

顺便说一句，你可以像这样调用 event.stopPropagation() 来防止事件冒泡：

$(element).mousemove(function(event) {
    event.stopPropagation();
    //some other code here
});

如果您现在将父级的 z-index 设置为 1，将“top”的 z-index 设置为 9，但将“laterindom”的 z-index 设置为 2，则“laterindom”元素将位于您的“top”之上" 即使“顶部”元素应该更高.. 可悲，但它是这样定义的。

在本例中：http://jsfiddle.net/R59Q8/3/ 城市在滚动窗口上方，但 dom 中滚动窗口下方的元素在城市上方，即使城市的 z-index 为 9，而最顶部的元素只有 2。

希望对你有帮助