Comment cacher le curseur main lorsqque je suis sur un élément cliquable
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>
Répondre avec citation
Partager