JavaScript Need your help 🤗 : How do I remove hand (pointer) cursor

[Dan001]

hello


Is it possible to remove the hand cursor that appears when hovering over a link? 😊

Below my CSS et JS code and in attachment a image. I do not know where to change the code 🤗 I'm not at all an expert in coding.

"cursor:none;" doesn't work

thank you for your help 😊

<script>
function createCustomCursor() {
let cursor = document.getElementById('myCustomCursor');

if (cursor) {
console.log('myCustomCursor already exist');
addCursorSpecialEffectToAllPageLinks(cursor);
} else {
cursor = document.createElement("div");
cursor.setAttribute("id", "myCustomCursor");
document.body.appendChild(cursor);

initCustomCursor(cursor);
addCursorSpecialEffectToAllPageLinks(cursor);
}
}


function initCustomCursor(cursor) {
document.body.onmousemove = function(e) {
cursor.style.setProperty('--x', (e.clientX) + 'px');
cursor.style.setProperty('--y', (e.clientY) + 'px');
}
}

function addCursorSpecialEffectToAllPageLinks(cursor) {
var links = document.querySelectorAll("a"); // Get page links

// This ״for loop״ is used to find all the page links and add the "myCursorHoverState" css class to create special effect on hover
for (var i = 0; i < links.length; i++) {
links[i].addEventListener("mouseenter", function(event) {
console.log('In');
cursor.classList.add("myCursorHoverState"); // Add the hover class
}, false);

links[i].addEventListener("mouseleave", function(event) {
console.log('Out');
cursor.classList.remove("myCursorHoverState"); // Removethe hover class
}, false);
}
}

function myFunction(x) {

    if (x.matches) { // If media query matches

        createCustomCursor();      

      }

    }

var x = window.matchMedia("(min-width: 1001px)")    //desktop

myFunction(x) // Call listener function at run time

x.addListener(myFunction) // Attach listener function on state changes


</script>

<style>

    body {

        cursor: none;

        min-height: 100%;

        background: rgb(0, 0, 0);

    }

   

    #myCustomCursor {

        cursor: none;

        position: fixed;

        width: 30px;

        height: 30px;

        background: #1B1C1E;

        border-radius: 50%;

        top: var(--y, 0);

        left: var(--x, 0);

        transform: translate(-50%, -50%);

        mix-blend-mode: normal;

        pointer-events: none;

        transition-duration: 40ms;

        transition-timing-function: ease-out;

        z-index: 999999!important;

    }

  #myCustomCursor.myCursorHoverState {

        cursor: none;

    width: 90px;

    height: 90px;

    background: pink;

}


}

</style>

 

[OldMan]

I see nothing in what you gave us to do this. Maybe inline styling is the culprit. Look in the html.