web-dev-qa-db-fra.com

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

Je souhaite masquer le curseur lors de l'affichage d'une page Web destinée à afficher des informations dans un hall de bâtiment. Il ne doit pas du tout être interactif. 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 sait pas où il clique, alors je ne suis pas très optimiste ... Merci!

javascripthtmlcss
108
yeyeyerman

Avec CSS:

selector { cursor: none; }

Un exemple:

<div class="nocursor">
 <!-- some stuff -->
</div>
<style type="text/css">
    .nocursor { cursor:none; }
</style>

Pour définir cela sur un élément en Javascript, vous pouvez utiliser la propriété style:

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

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

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

Assurez-vous cependant que vous voulez vraiment cacher le curseur. Cela peut vraiment énerver les gens.

178
Lucas Jones

API de verrouillage du pointeur

Alors que la solution CSS cursor: none est définitivement un solide et facile solution de contournement , si votre objectif réel est de remove le curseur par défaut pendant que votre l’application est utilisée ou implémentez votre interprétation own du mouvement brut de la souris (pour les jeux FPS, par exemple), vous pouvez envisager d’utiliser l’API Pointer Lock API à la place.

Vous pouvez utiliser requestPointerLock sur un élément pour supprimer le curseur et rediriger tous les événements mousemovevers cet élément (que vous puissiez 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

C'est un appel d'API très puissant. Cela rend non seulement votre curseur invisible, mais , il supprime le curseur natif de votre système d'exploitation . Vous ne pourrez pas sélectionner de texte, ni faire rien avec votre souris (sauf l'écoute de certains événements de souris dans votre code) jusqu'à ce que le verrou du pointeur soit libéré (soit en utilisant exitPointerLockou en appuyant ESC dans certains navigateurs).

C'est-à-dire que vous ne pouvez pas quitter la fenêtre avec votre curseur pour qu'il s'affiche à nouveau, car il n'y a pas de curseur.

Restrictions

Comme mentionné ci-dessus, il s'agit d'un appel API très puissant, qui ne peut donc être effectué qu'en réponse à une interaction directe de l'utilisateur sur le Web, telle qu'un clic; par exemple:

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

De plus, requestPointerLockne fonctionnera pas à partir d'un bac à sable iframeà moins que l'autorisation allow-pointer-lock ne soit définie.

User-notifications

Certains navigateurs demanderont une confirmation à l'utilisateur avant que le verrou ne soit activé, d'autres simplement afficheront un message. Cela signifie que le verrouillage du pointeur peut ne pas être activé immédiatement après l'appel. Toutefois, l'activation réelle du verrouillage du pointeur peut être écoutée en écoutant l'événement pointerchangesur l'élément sur lequel requestPointerLocka é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 parfois le message à chaque appel. Autant que je sache, cela ne peut être contourné que par les paramètres de l'utilisateur, voir Désactiver la notification de verrouillage du pointeur dans Firefox .

Écouter le mouvement brut de la souris

L'API Pointer Lock non seulement supprime la souris, mais redirige plutôt les données de mouvement brutes de la souris vers l'élément requestPointerLockqui a été appelé. Cela peut être écouté simplement en utilisant l'événement mousemovename__, puis en accédant aux propriétés movementXet movementYsur l'objet événement:

document.body.addEventListener("mousemove", function (e) {
    console.log("Moved by " + e.movementX + ", " + e.movementY);
});
22
John Weisz

Les autres réponses en action

.nocursor {
  cursor: none;
  
  padding: 2em;
  border: 1px solid #000;
}
<div class="nocursor">
  Bye cursor!
</div>

4
hultqvist

Si vous voulez le faire en CSS:

#ID { cursor: none !important; }
2
Maël Wyssbrod

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 avec plusieurs navigateurs . CSS2.1 n'a pas de valeur 'aucune' pour la propriété 'curseur' - il a été ajouté en CSS3. C'est pourquoi il est réalisable pas partout.

2
zaycker

Quand je fais

body {
   cursor: none;
}

Tout ce qui change, c’est que le curseur disparaisse (c’est ce que je veux), mais le problème, c’est que, lorsque vous passez sur un bouton, il réapparaît jusqu’à ce que je l’éloigne du curseur.

0
Arcade Workshop

Pour tout le document HTML, essayez ceci

html * {cursor:none}

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

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