I've divs overlayed on google maps which have 2 views
1) normal view
2) enlarged view on hover
normal view is shown at:
(unable to attach image inline ) https://fbcdn-sphotos-e-a.akamaihd.net/hphotos-ak-xfa1/t31.0-8/11411745_872499649497061_676791784342303480_o.jpg
When I hover on element1 it enlarges its view and I've set its z-index to high but another element which is hidden behind it gets mouseOver event even when its hidden behind the hover element and having lower z-index.
It occurs on basis of rendering of elements i.e. occurs for some divs and not for others (order in which divs are rendered).
Hovering on first element shows enlarged view but when mouse curser reaches close to 2nd element hover of 1st goes out.
Please note as per the stacking order of the CSS -first the context is printed
-then the element with position and negative z-index are printed
-then element without position are printed
-after that the element with 0 or auto z-index are printed
-the all element with postive z-index and position are printed
Now let's say an element is having negative z-index but its parent has positive z-index, then in that case the element will rendered above all those element which have z-index 0 or auto or does not have position or have z-index less that its parent
this is becase if any element has parent with position then its context changes from root to the parent and then it parent z-index defines its rendering stack
See 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