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

时间:2015-06-18 10:16:04

标签: javascript css html5 google-maps google-maps-markers

我在谷歌地图上叠加了div,其中包含2个视图 1)正常视图
2)悬停的放大视图

普通视图显示在:

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

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

它基于元素的渲染而发生,即某些div发生而不是其他div(渲染div的顺序)。

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

1 个答案:

答案 0 :(得分:0)

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

现在让我们说一个元素具有负z-index但其父元素具有正z-index,那么在这种情况下元素将呈现在所有具有z-index 0或auto或不具有z-index的元素之上有位置或z-index少于其父

这是因为如果任何元素具有父级位置,则其上下文从根变为父级,然后父级z-index定义其呈现堆栈

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