Ignorar la interacción del mouse en la imagen superpuesta se puede controlar mediante una propiedad de CSS, a saber, pointer-events .
Es una propiedad que define si un elemento de la página reaccionará a los eventos de puntero.
Sintaxis:
pointer-events: auto\none;
Ejemplo: El siguiente ejemplo demuestra el uso de la propiedad pointer-events.
<!DOCTYPE html>
<html>
<head>
<title>CSS pointer events</title>
<style>
.main {
position: relative;
width: 450px;
font: 25px Verdana;
}
.overlay {
position: absolute;
left: 0px;
top: 0;
width: 225px;
height: 225px;
}
.pointer-events-none {
pointer-events: none;
}
</style>
<script>
window.onload = function () {
document.getElementById(
"enable-disable-pointer-events")
.onclick = function () {
document.getElementById("overlay")
.className = "overlay "
+ ((this.checked) ?
"pointer-events-none" : "");
};
};
</script>
</head>
<body>
<div class="main">
<a href="https://www.geeksforgeeks.org/">
<img
src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20200618233603/gfg3.png"></a>
GeeksforGeeks: A computer
Science portal for Geeks.
<div id="overlay" class="overlay"></div>
<p>
<input id="enable-disable-pointer-events"
type="checkbox">
<label for="enable-disable-pointer-events">
Disable pointer events for image
</label>
</p>
</div>
</body>
</html>
Salida:
Cuando no se seleccionó la casilla de verificación: 
Cuando se seleccionó la casilla de verificación:
Salida final: