Currently, I am dealing with a React Component that contains an absolutely positioned div overlaying other content within my application. This particular div is utilized to trigger react's onMouseMove event.
My objective is to apply the CSS value pointer-events-none so that all components beneath the div remain clickable and responsive to pointer events. However, the challenge arises when having pointer-events-none present causes the onMouseMove event not to function anymore. Essentially, I want everything to behave as if the overlay div wasn't there, allowing only the onMouseMove event to be triggered.
The code structure in question is outlined below:
<button>I should be clickable</button>
<div>
<div
style={{
opacity: 0,
position: `absolute`,
top: `50px`,
left: `50px`,
width: `30vw`,
height: `30vh`,
pointerEvents: `none`,
}}
onMouseMove={() => {
console.log(`Fire!`)
}}
>
Overlay
</div>
<button>I should be clickable</button>
<a>I should be clickabel</a>
</div>
<button>I should be clickable</button>
I believe I may have overlooked something or possibly taken the wrong approach. Any guidance provided would be greatly appreciated!