3

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.

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
ChRapO
  • 327
  • 5
  • 14
  • 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 Feb 08 '10 at 13:15
  • because the div1 is semi-transparent – ChRapO Feb 08 '10 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 Sep 16 '11 at 01:36

5 Answers5

2

The 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>
Lachlan Roche
  • 25,678
  • 5
  • 79
  • 77
2

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>
Pablo
  • 33
  • 4
0

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
Ben
  • 1,117
  • 13
  • 21
0

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).

Buhake Sindi
  • 87,898
  • 29
  • 167
  • 228
  • 1
    I can change z-index, but the div1 will hide behind the div2 and that's the problem. :( – ChRapO Feb 08 '10 at 14:27
  • I don't know why you need a div inside a div but why not make div1 background transparent? – Buhake Sindi Feb 08 '10 at 18:43
  • 1
    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. – ChRapO Feb 08 '10 at 23:31
  • @ChRapO Can you add this last comment to the question body, it changes your question somewhat. – Lachlan Roche Feb 09 '10 at 02:35
  • @andrewjackson, if you can see my post, the link was posted in 2010. Don't you think that it might have changed since? -1 for poor common sense. – Buhake Sindi Sep 26 '12 at 06:46
  • @andrewjackson, the page was moved to another url path. I've updated my post to update the broken link (so, it wasn't taken off their site). – Buhake Sindi Sep 26 '12 at 11:23
  • let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/17207/discussion-between-andrewjackson-and-the-elite-gentleman) – Shea Sep 27 '12 at 00:00
-1

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?

Jeff Maes
  • 707
  • 8
  • 13