All geek questions in one place

How to ignore Onmouseover in javascript on div with absolute position

I have the following code:

<body>
  <div id="div1" style="position: absolute;"></div>
  <div id="div2" onmouseover="not handling"></div>
</body>

div1 spans div2. I need to handle onmouseover on div2. I assume that div1 handles the onmouseover event and lays it off on the body (because the body is the parent). I cannot change div1 to a "child" div2. Any ideas? THX

EDIT: div1 is translucent and should always be visible, and div2 is filled with color (not transparent). Div2 is also always displayed because div1 is translucent. I cannot have div1 inside div2.

+3
source share
5 answers

, (max z-index), onmouseover.

, div2 div z-, div2 z-, .

div3 , div2, onmouseover, 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>
+1

, CSS :

  • Z- div2 div1
  • div2
0

z- divs, div2 z-index div1 z-index

.

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

0

z-index, div1, div2.

-: none div1, , onmouseover.

<body>
<div id="div1" style="position: absolute; pointer-events:none"></div>
<div id="div2"></div>
</body>
0
source

The problem is that you cannot click (or mouseover) on a div. Therefore, when div1 is “above” div2, you have a problem.

Is it possible to use absolute / relative positioning for div1 and div2 and use a larger z-index for div2 than for div1?

-1
source

Source: https://habr.com/ru/post/1731860/

More articles:


All Articles