Ist es möglich, den Cursor auf einer Webseite mit CSS oder Javascript auszublenden?

129

Ich möchte den Cursor ausblenden, wenn eine Webseite angezeigt wird, auf der Informationen in einer Gebäudehalle angezeigt werden sollen. Es muss überhaupt nicht interaktiv sein. Ich habe es mit der Cursoreigenschaft und einem transparenten Cursorbild versucht, aber ich habe es nicht zum Laufen gebracht.

Weiß jemand, ob dies möglich ist? Ich nehme an, dies kann als Sicherheitsbedrohung für einen Benutzer angesehen werden, der nicht wissen kann, wo er klickt, daher bin ich nicht sehr optimistisch ... Danke!

javascript html css yeyeyerman
quelle

Antworten:

202

Mit CSS:

selector { cursor: none; }

Ein Beispiel:

<div class="nocursor">
   Some stuff
</div>
<style type="text/css">
    .nocursor { cursor:none; }
</style>
Erweitern Sie das Snippet

Um dies für ein Element in Javascript festzulegen, können Sie die styleEigenschaft verwenden:

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

Wenn Sie dies auf den ganzen Körper einstellen möchten:

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

Stellen Sie jedoch sicher, dass Sie den Cursor wirklich ausblenden möchten. Es kann Leute wirklich nerven.

Lucas Jones
quelle
Das hat perfekt funktioniert! Das Merkwürdige ist, dass ich die W3C-Spezifikation ( w3.org/TR/CSS2/ui.html ) gelesen habe und sie nichts darüber gesagt haben. Vielen Dank!
Yeyeyerman
10
W3 lieber! World World Wide Web.
Lucas Jones
4
So kümmern Sie sich um Browser, die CSS3 nicht unterstützen: Verwenden Sie ein 1x1px transparentes PNG oder ein 1% transparentes PNG.
Derek 29 會 功夫
1
Meines Wissens unterstützt IE6 transparentes PNG, sofern es sich um echte Transparenz und nicht um Alpha-Kanal-Transparenz handelt. Überprüfen Sie im Zweifelsfall die Testsuite: libpng.org/pub/png/pngsuite.html .
Shi
3
@MatthiasHerrmann: Versuch es document.body.style.cursor = 'auto'.
Lucas Jones
29

Zeigersperr-API

Die cursor: noneCSS-Lösung ist definitiv eine solide und einfache Problemumgehung . Wenn Ihr eigentliches Ziel darin besteht , den Standardcursor zu entfernen, während Ihre Webanwendung verwendet wird, oder Ihre eigene Interpretation der rohen Mausbewegung zu implementieren (z. B. für FPS-Spiele), können Sie dies tun Sie möchten stattdessen die Zeigersperr-API verwenden.

Sie können requestPointerLock für ein Element verwenden, um den Cursor zu entfernen und alle mousemoveEreignisse auf dieses Element umzuleiten (das Sie möglicherweise behandeln oder nicht behandeln):

document.body.requestPointerLock();

Um die Sperre aufzuheben , können Sie exitPointerLock verwenden :

document.exitPointerLock();

Zusätzliche Bemerkungen

Eigentlich kein Cursor

Dies ist ein sehr leistungsfähiger API-Aufruf. Es macht Ihren Cursor nicht nur unsichtbar, sondern entfernt auch den nativen Cursor Ihres Betriebssystems . Sie können keinen Text auswählen oder etwas mit Ihrer Maus tun (außer einige Mausereignisse in Ihrem Code abhören), bis die Zeigersperre aufgehoben wird (entweder durch Verwenden exitPointerLockoder Drücken ESCin einigen Browsern).

Das heißt, Sie können das Fenster nicht mit Ihrem Cursor verlassen, damit es erneut angezeigt wird, da kein Cursor vorhanden ist.

Beschränkungen

Wie oben erwähnt, ist dies ein sehr leistungsfähiger API-Aufruf und darf daher nur als Reaktion auf eine direkte Benutzerinteraktion im Web erfolgen, z. B. durch Klicken. beispielsweise:

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

Funktioniert auch requestPointerLocknicht in einer Sandbox, iframewenn die allow-pointer-lockBerechtigung nicht festgelegt ist.

Benutzerbenachrichtigungen

Einige Browser fordern den Benutzer zur Bestätigung auf, bevor die Sperre aktiviert wird, andere zeigen einfach eine Nachricht an. Dies bedeutet, dass die Zeigersperre möglicherweise nicht sofort nach dem Anruf aktiviert wird. Die tatsächliche Aktivierung der Zeigersperre kann jedoch abgehört werden, indem das pointerchangeEreignis auf dem Element abgehört wird, für das Folgendes requestPointerLockaufgerufen wurde:

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

Die meisten Browser zeigen die Nachricht nur einmal an, aber Firefox spammt die Nachricht gelegentlich bei jedem einzelnen Anruf. AFAIK, dies kann nur durch Benutzereinstellungen umgangen werden, siehe Deaktivieren der Zeigersperrbenachrichtigung in Firefox .

Rohe Mausbewegung hören

Die Zeigersperr-API entfernt nicht nur die Maus, sondern leitet auch rohe Mausbewegungsdaten an das requestPointerLockaufgerufene Element weiter. Dies kann einfach über das mousemoveEreignis und den Zugriff auf die Eigenschaften movementXund movementYfür das Ereignisobjekt abgehört werden:

document.body.addEventListener("mousemove", function (e) {
    console.log("Moved by " + e.movementX + ", " + e.movementY);
});
John Weisz
quelle
1
Danke dafür. Ich fand dies das einzig zuverlässige Mittel, um den Cursor in einem SPA zu verbannen, wenn zu einer Vollbild-Diashow gewechselt wird.
Velojet
1

Ich habe es mit transparentem * .cur 1px bis 1px gemacht, aber es sieht aus wie ein kleiner Punkt. :( Ich denke, es ist die beste browserübergreifende Sache, die ich tun kann. CSS2.1 hat keinen Wert 'none' für die Eigenschaft 'cursor' - es wurde in CSS3 hinzugefügt. Deshalb ist es nicht überall funktionsfähig.

Zaycker
quelle
4
Verwenden Sie stattdessen eine 1% Transparenz .png / .cur.
Derek 29 會 功夫
1

Wenn Sie es in CSS tun möchten:

#ID { cursor: none !important; }

quelle
7
Sie sollten generell vermeiden !important.
Luca Steeb
0

Versuchen Sie dies für ein ganzes HTML-Dokument

html * {cursor:none}

Oder wenn ein CSS Ihren Cursor überschreibt: Keine Verwendung! Wichtig

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

Wenn Sie den Cursor auf der gesamten Webseite ausblenden möchten, bodyfunktioniert die Verwendung nur, wenn sie die gesamte sichtbare Seite abdeckt, was nicht immer der Fall ist. Verwenden Sie Folgendes, um sicherzustellen, dass der Cursor überall auf der Seite versteckt ist:

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

Um es wieder zu aktivieren:

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

Die analoge mit statischer CSS - Notation ist in der Antwort von Pavel Salaquarda (im Wesentlichen: html * {cursor:none})

gaspar
quelle