Bonjour à tous

Je voudrais savoir svp à quel endroit je dois changer mon code pour faire disparaitre la curseur main lorsque je suis sur un élément cliquable.

ci-dessous mon code


CSS code

--------------

<style>

body {

cursor: none;

min-height: 100%;

background: rgb(0, 0, 0);

}



#myCustomCursor {

position: fixed;

width: 30px;

height: 30px;

background: #000000;

border-radius: 50%;

top: var(--y, 0);

left: var(--x, 0);

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

mix-blend-mode: normal;

pointer-events: none;

transition-duration: 50ms;

transition-timing-function: ease-out;

z-index: 999999!important;

}

#myCustomCursor.myCursorHoverState {

cursor: none;

width: 90px;

height: 90px;

background: pink;

}


}

</style>




JS code

------------

<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>