即使鼠标隐藏在更多 z-index 元素后面，也会调用较低 z-index 的鼠标悬停

Question

我在谷歌地图上叠加了 div，有 2 个视图
1) 普通视图
2）悬停时的放大视图

正常视图显示在：

（无法内嵌图像） https://fbcdn-sphotos-ea.akamaihd.net/hphotos-ak-xfa1/t31.0-8/11411745_872499649497061_676791784342303480_o.jpg

当我将鼠标悬停在 element1 上时，它会放大其视图，并且我已将其 z-index 设置为高，但是隐藏在它后面的另一个元素会获得 mouseOver 事件，即使它隐藏在悬停元素后面并且 z-index 较低。

它基于元素的呈现而发生，即针对某些 div 而不是针对其他 div（呈现 div 的顺序）。

悬停在第一个元素上会显示放大的视图，但是当鼠标光标接近第二个元素时，第一个元素的悬停会消失。

Answer 1

请注意按照 CSS 的堆叠顺序 - 首先打印上下文
- 然后打印具有位置和负 z-index 的元素
- 然后打印没有位置的元素
- 之后打印具有 0 或自动 z-index 的元素
- 打印所有具有正 z-index 和位置的元素

现在假设一个元素的 z-index 为负，但其父元素的 z-index 为正，那么在这种情况下，该元素将呈现在所有 z-index 为 0 或 auto 或没有位置或 z-index 的元素之上小于它的父级

这是因为如果任何元素的父元素都有位置，那么它的上下文从根变为父元素，然后它的父元素 z-index 定义了它的渲染堆栈

请参阅https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Understanding_z_index/Stacking_without_z-index和http://www.w3.org/TR/CSS21/zindex.html