web-dev-qa-db-fra.com

Masquer le curseur dans Chrome (et IE)

J'ai le CSS suivant qui cache le curseur de la souris pour tout ce qui se trouve sur la page Web. Cela fonctionne parfaitement dans Firefox, mais dans IE et Chrome, cela ne fonctionne pas.

html {
    cursor: none;
}

Dans Chrome, je vois toujours le pointeur de la souris. Dans IE, cependant, je vois quel que soit le dernier curseur «actif» lorsqu'il est entré dans l'écran. On présume que c'est conserver la dernière sélection au lieu de la supprimer.

htmlcsscursormouse-cursor
18
Chris

Cette propriété cursor:none; ne fait pas partie de la norme

Voir ici Propriétés CSS du curseur w3c .

Vous voudrez peut-être chercher à le cacher avec Javascript ou JQuery.

Regardez aussi les fichiers de curseur vierges ici .

Et un dernier lien vers une solution ajax .

Chrome a eu ce problème depuis sa construction, des rapports ont été envoyés aux utilisateurs de Chromium , et je suppose qu'ils y travaillent.

En outre, ne croyez pas que quelque chose fonctionnerait dans IE. Déjà. : P

22
Kyle

J'ai eu le même problème ces jours-ci et j'ai trouvé une bonne solution pour masquer le pointeur dans Google Chrome.

Ceci est la Définition du W3C of url property:

Une virgule séparée des URL vers les curseurs personnalisés. Remarque: spécifiez toujours un curseur générique à la fin de la liste, au cas où aucun des curseurs définis par l'URL ne peut être utilisé.

Ainsi, vous pouvez définir une URL à pas complètement transparente image, suivie du pointeur par défaut:

cursor: url(img/almost_transparent.png), default;

Si vous choisissez un fichier png totalement transparent, Chrome affichera un rectangle noir à la place, mais si vous choisissez un fichier png avec au moins 1 px non transparent, cela fonctionnera et personne ne remarquera le pointeur.

11
alexmeia

Trouver quelque chose qui fonctionne sur tous les navigateurs est une douleur.

Le code ci-dessous fonctionne sur Chrome, IE et Firefox. IE aime les fichiers .cur, Chrome aime les fichiers png intégrés, et certains navigateurs respectent ceux qui ne le sont pas :)

div {
    cursor: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAZdEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjbQg61aAAAADUlEQVQYV2P4//8/IwAI/QL/+TZZdwAAAABJRU5ErkJggg=='),
    url(images/blank.cur),
    none;
}
7
Aditya Ravi Shankar

Donc, la meilleure façon de gérer cela maintenant est l’API de verrouillage du pointeur.

https://developer.mozilla.org/en-US/docs/WebAPI/Pointer_Lock

Cela cachera le curseur de la souris, mais vous donnera également accès aux données sur les mouvements de la souris.

0
RandallB