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

mouse over of lower z-index is called even when its hidden behind the more z-index element

我在 google 有 2 个视图的地图上叠加了 div
1) 普通视图
2) 悬停放大视图

普通视图显示在:

(无法内嵌附加图像) https://fbcdn-sphotos-e-a.akamaihd.net/hphotos-ak-xfa1/t31.0-8/11411745_872499649497061_676791784342303480_o.jpg

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

它根据元素的呈现发生,即发生在某些 div 而不是其他(呈现 div 的顺序)。

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

请注意按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 and http://www.w3.org/TR/CSS21/zindex.html