1

我正在开发一款需要大地图的游戏。我所做的是在 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%;

}

查询：

$('.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。关于如何解决这个问题的任何建议？谢谢！

4

1 回答 1

1

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

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

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

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

元素“in”另一个元素（如 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。

希望这可以帮助

于 2013-06-16T20:57:46.827 回答