Comment changer le curseur de la souris en HTML ?

Vous pouvez changer le curseur de la souris HTML de deux manières distinctes :

• En JavaScript avec l'objet DOM element.style.
• En CSS avec la propriété cursor.

Vous pouvez utiliser les curseurs prédéfinis par les navigateurs internet, ou bien utiliser un curseur personnalisé sous la forme d'une image.

Exemple pour changer le curseur de la souris, au survol d'une image, en JavaScript :

<img src="https://www.collaborativejob.com/os.jpg" id="image" alt="">
<script>
document.getElementById("image").style.cursor = "wait";
</script>

Exemple pour changer le curseur de la souris, sur toute la page, en CSS :

<style>
html, body {
  cursor: wait;
}
</style>

Exemple pour mettre une image en tant que curseur sur toutes les balises <div> :

<style>
div {
  cursor: url('image.png'), auto;
}
</style>