Changer le curseur de la souris sur le mouvement

Question

Je suis un peu perdu sur la façon de faire. Le code que j'ai fait fonctionne bien pour changer le curseur sur mon site web; cependant, je veux que cela ne prenne effet que lorsque l'utilisateur déplace la souris, puis revenez au curseur par défaut lorsque l'utilisateur arrête de déplacer la souris.

Voici mon code à ce jour:

<style type="text/css">body, a:hover {cursor: url(https://www.weebly.com/weebly/images/file_icons/image.png), progress !important;}</style> 

Answer 1

Vous pouvez utiliser un peu de JavaScript pour ajouter et supprimer une classe CSS.

Ajouter une classe à votre CSS:

.change-cursor { 
    cursor: url(https://www.weebly.com/weebly/images/file_icons/image.png), progress !important; 
} 

Et puis dans votre JavaScript:

var timeout; 

document.onmousemove = function() { 

    // Clear timeout, as mouse is still moving 
    clearTimeout(timeout); 

    // Add class, as mouse is still moving 
    document.querySelector('body ').classList.add('change-cursor') 

    // Schedule class to be removed very shortly in the future 
    timeout = setTimeout(function() { 
    document.querySelector('body').classList.remove('change-cursor') 
    }, 100) 

}