JSFiddle - React, Tailwind, and code Playground

HTML

Messages are sent to the browser console log.

<!-- I have no control over the layer structure, so changing the HTML code is not an option -->

<div id="testdiv">"testdiv" should receive events</div>
<div id="cover">Layer above "testdiv"</div>

CSS

#testdiv {
    position: absolute;
    left: 100px;
    top: 70px;
    width: 200px;
    height: 50px;
    background: #ffe;
    border: 1px solid red;
}

#cover {
    position: absolute;
    left: 10px;
    top: 40px;
    width: 320px;
    height: 200px;
    border: 1px solid blue;
    pointer-events: none;
}

JavaScript

var testdiv = document.getElementById("testdiv");

$(testdiv).observe("mouseover", function() {
    console.log("mouseover");
});
$(testdiv).observe("mouseout", function() {
    console.log("mouseout");
});