Onmouseenter And Onmouseleave Not Functioning As Expected

I'm trying to simulate a hover effect for my component. However, the onMouseEnter / Leave events are not working as expected, right now I'm trying to get it to simply console.log a

Solution 1:

In your css you have pointer-events: none;, this disable the mouse events from happening. Remove them and it works.

fiddle

.OnScrollComp {
  border-style: solid;
  border-color: black;
  border-width: thick;
  width: 600px;
  height: 300px;
  opacity: 0;
  transition: opacity 3s;
}



.OnScrollComp.visible {
  opacity: 1;
}