Event doesn't work

i have a div which has a child div. something like

<div>
   <div></div>
</div>

<div>
   <div></div>
</div>

the first div covers the second div fully, so i want to create an event for the second div but because of the second i can't. till now i have tried pointer-events and changing the z-index.

9 Replies

xposedbones•17mo ago

Not sure what you mean by creating an event. Can you provide a screenshot and/or describe your use-case and the desired outcome?

13eck•17mo ago

What's your current code look like? What have you tried? So far you've given us nothing to work with, sadly.

MEOP•17mo ago

This is not my main project but it creates the same problem

MEOP•17mo ago

MEOP•17mo ago

Mannix•17mo ago

to what element you added pointer-events?? it seems to work https://codepen.io/MannixMD/pen/LYMYbax

Mannix

CodePen

LYMYbax

...

__araceli•17mo ago

Hi, not sure if you already solved this, but when you put pointer events none on an element, the children inherit it. So you will need to put pointer events: all in the item you want to interact

java8031•17mo ago

On the code pen you have

.outer{
  position: relative;
  top:0;
  left:0;
  width: 12rem;
  z-index: 1;
  height: 12rem;
  background: rgba(24,12,213,0.6);
/*   pointer-events:none; */
}

.outer{
  position: relative;
  top:0;
  left:0;
  width: 12rem;
  z-index: 1;
  height: 12rem;
  background: rgba(24,12,213,0.6);
/*   pointer-events:none; */
}

removing the pointer-event: none will make it work, it is preventing the entire element and its children from being clickable or interactive.

Ssadiq Roy•17mo ago

From what I see in your html the .inner element is not in the .outer element. It is just indented.

Gaming

Programming

Event doesn't work