How to ignore mouse interaction on overlay image using JavaScript ?
Ignoring mouse interaction on overlay images can be controlled by a CSS property namely pointer-events. It is a property that defines if an element of the page will react to the pointer-events.
Syntax:
pointer-events: auto\none;
Example: The following example demonstrates the use of pointer-events property.
html
<!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" > < img src = "https://media.w3wiki.net/wp-content/cdn-uploads/20200618233603/gfg3.png" ></ a > w3wiki: A computer Science portal for Beginner. < 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 > |
Output:
Contact Us