I have the following code:
<body>
<div id="div1" style="position: absolute;"></div>
<div id="div2" onmouseover="not handling"></div>
</body>
div1 covers div2. I need to handle onmouseover on div2. I assume that div1 handles the onmouseover event and postpone it to the body (because the body is a parent element). I cannot change div1 to a "child" of div2. Any ideas?
EDIT: The div1 is semitransparent and has to be always visible and the div2 is filled by color (not transparent). The div2 is also always visible because the div1 is semitransparent. I cannot have div1 inside div2.
I have the following code:
<body>
<div id="div1" style="position: absolute;"></div>
<div id="div2" onmouseover="not handling"></div>
</body>
div1 covers div2. I need to handle onmouseover on div2. I assume that div1 handles the onmouseover event and postpone it to the body (because the body is a parent element). I cannot change div1 to a "child" of div2. Any ideas?
EDIT: The div1 is semitransparent and has to be always visible and the div2 is filled by color (not transparent). The div2 is also always visible because the div1 is semitransparent. I cannot have div1 inside div2.
Share Improve this question edited Nov 16, 2020 at 23:08 Brian Tompsett - 汤莱恩 5,89372 gold badges61 silver badges133 bronze badges asked Feb 8, 2010 at 13:12 ChRapOChRapO 3375 silver badges14 bronze badges 3- Why do you want to handle the mouseover of an element which won't be shown to the user, but will be hidden by another element? – rahul Commented Feb 8, 2010 at 13:15
- because the div1 is semi-transparent – ChRapO Commented Feb 8, 2010 at 16:42
- 1 I have the same issue - in my case it's while I'm dragging an object, so my 'div1' (my drag proxy) is under the mouse and over my 'div2' (the drop zone). Anyone have an answer? – jinglesthula Commented Sep 16, 2011 at 1:36
5 Answers
Reset to default 2The element that is highest in the stacking order (max z-index) will receive the onmouseover event.
To achieve the desired effect, wrap div2 in another div with the highest z-index, give div2 a lower z-index than your overlay.
As div3 has the same bounding box as div2, we attach a onmouseover event to it, and have the event handler act upon div2.
<body>
<div id="div1" style="position: absolute; z-index: 10; left:0; top; 0; width: 100%; height: 100%; opacity: 0.25; background-color: black;"></div>
<div id="div3" style="z-index: 20; position: relative;">
<div id="div2" style="z-index: 0; position: relative;">
</div>
</div>
</body>
Forget about the z-index because you want div1 to be shown, not behind div2.
Try using pointer-events:none on div1 since u don't want it to affect the onmouseover event.
<body>
<div id="div1" style="position: absolute; pointer-events:none"></div>
<div id="div2"></div>
</body>
Two suggestions to try, not knowing anything about your CSS or page layout:
- Change the Z-index of div2 to be higher than div1
- Put div2 first in the tag order
By adding a z-index on the divs such that div2's z-index is higher than div1's z-index
e.g.
<body>
<div id="div1" style="position: absolute; z-index: -1"></div>
<div id="div2" style="position: relative; z-index: 1000" onmouseover="alert('mousemove')"></div>
</body>
z-index specifies the stack order of an element (and it can be negative too).
- W3Schools on z-index.
The problem is that you cannot click (or mouseover) through a div. So when div1 is 'above' div2 you have a problem.
Isn't it possible to use absolute/relative positioning for both div1 and div2 and use a bigger z-index for div2 than for div1?