hide cursor on class

Question

on the website https://florianwmueller.com/work-alternative/ (a testpage) I have several images with the class .no-cursor. Then I have this little javascript below:

<script>
var elements = document.getElementsByClassName("no-cursor");
var style;

for (var i = 0; i < elements.length; i++) {
    elements[i].addEventListener("mouseover", function() {
        style = document.createElement("style");
        style.innerHTML = "body.cursor-element-shape a { cursor: none !important; } .wpcc-active > .wpcc-cursor { display: none !important; }";
        document.head.appendChild(style);
    });
  
    elements[i].addEventListener("mouseleave", function() {
        document.head.removeChild(style);
    });
}
</script>

The goal is that this script prevents any mouse pointer from being visible when hovering the corresponding images. This has worked well so far, but after an update of the plugin "Custom Cursor" it no longer works. Can you tell me why? The goal is that this script prevents any mouse pointer from being visible when hovering the corresponding images, also the custom cursor. This has worked well so far, but suddenly not anymore. Anyone any idea?

Answer 1

You can achieve it using css like this:

.no-cursor{
  cursor:none; /*Setting the cursor to be invisible*/
  }

<img src="https://cdn.sstatic.net/Sites/stackoverflow/Img/favicon.ico" alt="image" class="no-cursor">

If it is still showing then that means something is overriding it, and in this case add !important after none