Skip to content
Related Articles

Related Articles

How to ignore mouse interaction on overlay image using JavaScript ?

Improve Article
Save Article
  • Last Updated : 22 Jun, 2020
Improve Article
Save Article

Ignoring mouse interaction on overlay image 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.


pointer-events: auto\none;

Example: The following example demonstrates the use of pointer-events property.

<!DOCTYPE html>
  <title>CSS pointer events</title>
    .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;
    window.onload = function () {
        .onclick = function () {
            .className = "overlay " 
            + ((this.checked) ? 
            "pointer-events-none" : "");
  <div class="main">
    GeeksforGeeks: A computer 
    Science portal for Geeks.
    <div id="overlay" class="overlay"></div>
      <input id="enable-disable-pointer-events" 
      <label for="enable-disable-pointer-events">
        Disable pointer events for image

When the checkbox was not selected:

When the checkbox is selected:

Final Output:

My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!