wake-up-neo.net

Kann der Cursor auf einer Webseite mit CSS oder Javascript ausgeblendet werden?

Ich möchte den Cursor ausblenden, wenn eine Webseite angezeigt wird, die Informationen in einer Gebäudehalle anzeigen soll. Es muss überhaupt nicht interaktiv sein. Ich habe es mit der Cursor-Eigenschaft und einem transparenten Cursor-Bild versucht, aber ich habe es nicht funktionieren lassen.

Weiß jemand, ob dies möglich ist? Ich nehme an, dass dies als Sicherheitsbedrohung für einen Benutzer betrachtet werden kann, der nicht wissen kann, wo er darauf klickt. Deshalb bin ich nicht sehr optimistisch ... Vielen Dank!

javascripthtmlcss
108
yeyeyerman

Mit CSS:

selector { cursor: none; }

Ein Beispiel:

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

Um dies für ein Element in Javascript festzulegen, können Sie die style-Eigenschaft 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 wollen:

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

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

178
Lucas Jones

Pointer Lock API

Während die cursor: none CSS-Lösung definitiv eine solide und einfache Problemumgehung ist , besteht Ihr eigentliches Ziel darin, den Standardcursor im Web zu entfernen Anwendung verwendet wird, oder implementieren Sie Ihre eigene Interpretation der rohen Mausbewegung (z. B. für FPS-Spiele). Verwenden Sie möglicherweise die Zeigersperre ) API stattdessen.

Sie können requestPointerLock für ein Element verwenden, um den Cursor zu entfernen, und alle mousemove -Ereignisse zu diesem Element umleiten (das Sie möglicherweise behandeln oder nicht):

document.body.requestPointerLock();

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

document.exitPointerLock();

Zusätzliche Bemerkungen

Kein Cursor, für echte

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

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

Einschränkungen

Wie oben erwähnt, handelt es sich um einen sehr leistungsfähigen API-Aufruf, der nur als Reaktion auf eine direkte Benutzerinteraktion im Web (z. B. einen Klick) ausgeführt werden darf. zum Beispiel:

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

Außerdem funktioniert requestPointerLock nicht mit iframe in einer Sandbox, es sei denn, die Berechtigung allow-pointer-lock ist festgelegt.

Benutzerbenachrichtigungen

Einige Browser fordern den Benutzer zur Bestätigung auf, bevor die Sperre aktiviert wird, andere zeigen einfach eine Meldung 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 Ereignis pointerchange für das Element abgehört wird, für das requestPointerLock aufgerufen 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 sie gelegentlich bei jedem einzelnen Anruf. AFAIK, dies kann nur durch Benutzereinstellungen umgangen werden, siehe Benachrichtigung über Zeigersperre in Firefox deaktivieren .

Rohe Mausbewegung anhören

Die Zeigersperr-API entfernt nicht nur die Maus, sondern leitet rohe Mausbewegungsdaten an das Element weiter, für das requestPointerLock aufgerufen wurde. Dies kann einfach abgehört werden, indem Sie das Ereignis mousemove verwenden und dann auf die Eigenschaften movementX und movementY für das Ereignisobjekt zugreifen:

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

Die anderen Antworten in Aktion

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

4
hultqvist

Wenn Sie es in CSS machen wollen:

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

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

2
zaycker

Wenn ich tue

body {
   cursor: none;
}

Alles, was sich ändert, ist, dass der Cursor verschwindet (was ich will), aber das Problem ist, wenn er über einen Button geht, wird er wieder angezeigt, bis ich den Cursor davon wegnehme.

0
Arcade Workshop

Für das ganze HTML-Dokument versuchen Sie dies

html * {cursor:none}

Oder wenn einige CSS Ihren Cursor überschreiben: keine Verwendung! Wichtig

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