ansaurus

Question

How to ignore Onmouseover in javascript on div with absolute position

Answer 1

A:

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 2010-02-08 13:18:23

Answer 2

A:

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 2010-02-08 13:20:54

Actually you can, onclick functions exists for divs and it works.

The Elite Gentleman 2010-02-08 13:59:18

Answer 3

A:

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 2010-02-08 13:21:06

Answer 4

+1 A:

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) (http://www.w3schools.com/Css/pr_pos_z-index.asp)

The Elite Gentleman 2010-02-08 14:03:08

I can change z-index, but the div1 will hide behind the div2 and that's the problem. :(

ChRapO 2010-02-08 14:27:33

I don't know why you need a div inside a div but why not make div1 background transparent?

The Elite Gentleman 2010-02-08 18:43:37

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 2010-02-08 23:31:45

@ChRapO Can you add this last comment to the question body, it changes your question somewhat.

Lachlan Roche 2010-02-09 02:35:34

sure i can :) thx

ChRapO 2010-02-09 23:16:09

ansaurus

tags:

views:

answers:

How to ignore Onmouseover in javascript on div with absolute position

related questions