Pass Mouse Events Through Absolutely-Positioned Element

Pass mouse events through absolutely-positioned element

pointer-events: none;

Is a CSS property that makes events "pass through" the HTML-element to which the property is applied. It makes the event occur on the element "below".

See for details: https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events

It is supported by almost all browsers, including IE11; global support was ~98.2% in 05/'21): http://caniuse.com/#feat=pointer-events (thanks to @s4y for providing the link in the comments).

Absolutely positioned overlay passes hover event in spite of `pointer-event:none` in CSS

The thing is, when you hover .overlay, you also hover its parent, which is .positioner, since they are positioned on top of each other.
If you move .overlay below .positioner, it will not trigger hover effect on its parent:

.positioner {
  width: 100px;
  height: 100px;
  position: relative;
  background: #FAD7A0;
}

.positioner:hover {
  background: #85C1E9;
}

.overlay {
  position: absolute;
  width: 100px;
  height: 100px;
  top: 100px;
  background: rgba(0, 0, 1, 0.5);
  pointer-events: none;
}

<div class="positioner">
  <div class="overlay"></div>  
</div>

Mouseenter events on absolutely positioned elements

Just add z-index: -1 for unvisible ul:

   .menu ul ul {
        position: absolute;
        top: 0;
        width: 0;
        left: 50%;
        opacity: 0;
        z-index: -1;
    }
    .menu ul li:hover > ul{
       opacity: 1;
       width: 100%;
       z-index: 1;
    }

Also as I mention above you can avoid jquery and do this with pure css.
Also you can add some transition for .menu ul ul{ transition: .2s} and it will have sime kind of simple animation.

How to pass mouse events between overlapping components in ReactJS

You can pass events as props like so:

import { useState } from 'react'

const Wrapper = () => {
  const [event, setEvent] = useState(null)

  return (
    <div onClick={(e) => setEvent(e)}>
      Lorem Ipsum
      <Component event={event} />
    </div>
  )
}

const Component = (event) => {
  console.log(event) // → event: SyntheticBaseEvent
  return null
}

export default Wrapper

How can I enable pointer-events to pass through elements without disabling them?

Instead to achieve the required behavior, you can place the whole in a relative container with fixed width and height as shown. And apply the hovereffect to it than #listlink.

.container {  position: relative;  height: 100px;  width: 100px;  background: rgba(255, 0, 0, 0.4);}.container:hover {  background: rgba(255, 0, 0, 0.8);}#listlink { /* height: 100px;  width: 100px;*/  top: 0;  bottom:0;  left: 0;  right:0;  position: absolute;  /*background: rgba(255, 0, 0, 0.4);*/}/*#listlink:hover {  background: rgba(255, 0, 0, 0.8);}*/
#listitem {  /* height: 100px;  width: 100px;*/  top: 0;  bottom:0;  left: 0;  right:0;  position: absolute;  z-index: 10;  pointer-events: none;}
#childlink {  background: rgba(0, 0, 255, 0.4);  pointer-events: auto;}
#childlink:hover {  background: rgba(0, 0, 255, 0.8);}

<div class='container'>  <a id="listlink" href="#listlink"></a>  <div id="listitem">    Text <a id="childlink" href="#childlink">top link</a> text  </div></div>

Absolutely positioned elements collapse

One approach could be using white-space: pre; on parent div:

    span {
      display: block;
    }

    span.sub {
      color: blue;
      position: absolute;
    }


    /* --------------------- */

    :root {
      /* 1em is default font size */
      --menu-bar-height: 1.3em;
    }

    body div {
      
      width: 200px;
      background-color: rgb(122, 213, 243);

      height: var(--menu-bar-height);
      white-space: pre;
    }

    span:first-child {
      margin-top: -2em;
      width: fit-content;
      background-color: rgb(48, 171, 212);
    }

    span.sub {
      margin-top: -2.4em;
    }


    /* cosmetic changes */
    .sub:hover {
      border: 2px dotted blue;
      transform: translateX(10px);
    }

    .sub:nth-child(even) {
      background-color: lawngreen;
    }

    .sub:nth-child(odd) {
      background-color: tomato;
    }

    #second {
      width: 200px;
      height: 200px;
      background-color: wheat;
      text-align: center;
      z-index: -1;
    }

<div>
  <span>Coffee</span>
  <span class="sub">Tea</span>
  <span class="sub">Milk</span>
  <span class="sub">Water</span>
  <span class="sub">Chocolate</span>
</div>
<div id="second">Div 2</div>

Pass Mouse Events Through Absolutely-Positioned Element