Est-il possible de masquer le curseur dans une page Web en utilisant CSS ou Javascript?

129

Je souhaite masquer le curseur lors de l'affichage d'une page Web destinée à afficher des informations dans un bâtiment. Il n'a pas besoin d'être interactif du tout. J'ai essayé avec la propriété de curseur et une image de curseur transparente mais je ne l'ai pas fait fonctionner.

Est-ce que quelqu'un sait si cela peut être fait? Je suppose que cela peut être considéré comme une menace pour la sécurité d'un utilisateur qui ne peut pas savoir où il clique, donc je ne suis pas très optimiste ... Merci!

javascript html css yeyeyerman
la source

Réponses:

203

Avec CSS:

selector { cursor: none; }

Un exemple:

<div class="nocursor">
   Some stuff
</div>
<style type="text/css">
    .nocursor { cursor:none; }
</style>
Développer l'extrait

Pour définir ceci sur un élément en Javascript, vous pouvez utiliser la stylepropriété:

<div id="nocursor"><!-- some stuff --></div>
<script type="text/javascript">
    document.getElementById('nocursor').style.cursor = 'none';
</script>

Si vous souhaitez définir ceci sur tout le corps:

<script type="text/javascript">
    document.body.style.cursor = 'none';
</script>

Assurez-vous cependant de vraiment vouloir masquer le curseur. Cela peut vraiment ennuyer les gens.

Lucas Jones
la source
Cela a parfaitement fonctionné! La chose curieuse est que j'ai fouillé la spécification W3C ( w3.org/TR/CSS2/ui.html ) et ils n'ont rien dit à ce sujet. Merci!
yeyeyerman
10
W3 plutôt! Monde monde Wide Web.
Lucas Jones
4
Comment se soucier des navigateurs qui ne prennent pas en charge CSS3: Utilisez un 1x1png transparent px ou 1% transparent png.
Derek 朕 會 功夫
1
À ma connaissance, IE6 prend en charge le PNG transparent, à condition qu'il s'agisse d'une vraie transparence et non d'une transparence de canal alpha. En cas de doute, consultez la suite de tests: libpng.org/pub/png/pngsuite.html .
Shi
3
@MatthiasHerrmann: Essayez document.body.style.cursor = 'auto'.
Lucas Jones
30

API de verrouillage de pointeur

Bien que la cursor: nonesolution CSS soit définitivement une solution de contournement solide et facile , si votre objectif réel est de supprimer le curseur par défaut pendant que votre application Web est utilisée, ou d'implémenter votre propre interprétation du mouvement brut de la souris (pour les jeux FPS, par exemple), vous pouvez souhaitez plutôt envisager d'utiliser l' API Pointer Lock .

Vous pouvez utiliser requestPointerLock sur un élément pour supprimer le curseur et rediriger tous les mousemoveévénements vers cet élément (que vous pouvez ou non gérer):

document.body.requestPointerLock();

Pour libérer le verrou, vous pouvez utiliser exitPointerLock :

document.exitPointerLock();

Notes complémentaires

Pas de curseur, pour de vrai

Il s'agit d'un appel API très puissant. Il rend non seulement votre curseur invisible, mais il supprime en fait le curseur natif de votre système d'exploitation . Vous ne pourrez pas sélectionner de texte ni faire quoi que ce soit avec votre souris (sauf en écoutant certains événements de souris dans votre code) tant que le verrouillage du pointeur ne sera pas libéré (soit en utilisantexitPointerLock ou en appuyant sur ESCdans certains navigateurs).

Autrement dit, vous ne pouvez pas quitter la fenêtre avec votre curseur pour qu'elle s'affiche à nouveau, car il n'y a pas de curseur.

Restrictions

Comme mentionné ci-dessus, il s'agit d'un appel d'API très puissant, et il n'est donc permis de faire qu'en réponse à une interaction directe de l'utilisateur sur le Web, comme un clic; par exemple:

document.addEventListener("click", function () {
    document.body.requestPointerLock();
});

De plus, requestPointerLockne fonctionnera pas à partir d'un bac iframeà sable sauf si leallow-pointer-lock autorisation est définie.

Notifications utilisateur

Certains navigateurs demanderont à l'utilisateur une confirmation avant que le verrouillage ne soit engagé, d'autres afficheront simplement un message. Cela signifie que le verrouillage du pointeur peut ne pas s'activer immédiatement après l'appel. Cependant, l'activation réelle du verrouillage du pointeur peut être écoutée en écoutant l' pointerchangeévénement sur l'élément sur lequel a requestPointerLockété appelé:

document.body.addEventListener("pointerlockchange", function () {
    if (document.pointerLockElement === document.body) {
        // Pointer is now locked to <body>.
    }
});

La plupart des navigateurs n'afficheront le message qu'une seule fois, mais Firefox spammera occasionnellement le message à chaque appel. AFAIK, cela ne peut être contourné que par les paramètres utilisateur, voir Désactiver la notification de verrouillage du pointeur dans Firefox .

Écouter les mouvements bruts de la souris

L'API Pointer Lock supprime non seulement la souris, mais redirige à la place les données brutes de mouvement de la souris vers l'élément requestPointerLockappelé. Cela peut être écouté simplement en utilisant l' mousemoveévénement, puis en accédant aux propriétés movementXet movementYde l'objet événement:

document.body.addEventListener("mousemove", function (e) {
    console.log("Moved by " + e.movementX + ", " + e.movementY);
});
John Weisz
la source
1
Merci pour cela. J'ai trouvé que c'était le seul moyen fiable de bannir le curseur dans un SPA lors du passage à un diaporama plein écran.
Velojet
1

Je l'ai fait avec transparent * .cur 1px à 1px, mais cela ressemble à un petit point. :( Je pense que c'est la meilleure chose que je puisse faire pour plusieurs navigateurs. CSS2.1 n'a pas de valeur 'none' pour la propriété 'cursor' - il a été ajouté dans CSS3. C'est pourquoi il n'est pas utilisable partout.

Zaycker
la source
4
Utilisez plutôt un .png / .cur de transparence à 1%.
Derek 朕 會 功夫
1

Si vous voulez le faire en CSS:

#ID { cursor: none !important; }

la source
7
Vous devriez généralement éviter !important.
Luca Steeb
0

Pour tout le document html, essayez ceci

html * {cursor:none}

Ou si certains css écrasent votre curseur: aucune utilisation! Important

html * {cursor:none!important}
Pavel Salaquarda
la source
0

Si vous souhaitez masquer le curseur dans toute la page Web, l'utilisation bodyne fonctionnera que si elle couvre toute la page visible, ce qui n'est pas toujours le cas. Pour vous assurer que le curseur est caché partout dans la page, utilisez:

document.documentElement.style.cursor = 'none';

Pour le réactiver:

document.documentElement.style.cursor = 'auto';

L'analogue avec la notation CSS statique est dans la réponse par Pavel Salaquarda (en substance: html * {cursor:none})

gaspar
la source