JavaScript setting pointer-events from none to auto

Question

JavaScript setting pointer-events from none to auto

90 Views Asked by A D At 07 January 2024 at 16:33

I need a way to overwrite my elements that are set to pointer-events:none. I have already tried a few things, but it doesn't seem to be able to control the elements under this setting.

const meinElement = document.getElementById('hovertest');

      meinElement.addEventListener('mouseenter', function() {
          meinElement.style.pointerEvents = "none"; 
          meinElement.classList.add('hovered'); 
      });

      meinElement.addEventListener('mouseleave', function() {
          meinElement.style.pointerEvents = "none";
          meinElement.classList.remove('hovered'); 
      });

  #hovertest {
    width: 100px;
    height: 100px;
    border: 1px solid red;
    position: absolute;
    z-index: 999999999999999999999999999999999999999999999999999999999;
  }

  .hovered {
      background-color: red; 
      pointer-events: auto;
  }

I have already tried this suggestion, which didn’t work. JavaScript setting pointer-events

I expected the JS to override the setting, but that is not the case.

Original Q&A

There are 1 best solutions below

**Mateuszprogrammer1302** · Answer 1 · 2024-01-07T16:34:54.877000

You have to delete the meinElement.style.pointerEvents = "none"; because when you add this it will hover only one time and add. It happens because when you set it to "none"; it can't be changed anymore. Add CSS cursor property when using "pointer-events: none"

const meinElement = document.getElementById('hovertest');

meinElement.addEventListener('mouseenter', function() {
    
   meinElement.classList.add('hovered');
});

meinElement.addEventListener('mouseleave', function() {

    meinElement.classList.remove('hovered');
});

#hovertest {
    width: 100px;
    height: 100px;
    border: 1px solid red;
    position: absolute;
    z-index: 999999999999999999999999999999999999999999999999999999999;
}

.hovered {
    background-color: red ;
    pointer-events: auto ;
}

<html>
<body>
<button id="hovertest">Click me</button>
</body>
</html>

JavaScript setting pointer-events from none to auto

There are 1 best solutions below

Related Questions in JAVASCRIPT

Related Questions in POINTER-EVENTS

Trending Questions

Popular # Hahtags

Popular Questions