Webmaster: Mauszeiger ausblenden und verstecken!

Für manche Web-Projekte ist es praktisch, den Mauszeiger zu verstecken: Nicht um den Besucher zu ärgern, sondern um ihn nicht zu verwirren. Bei einem Touch-Screen stört der Mauszeiger, da man die Elemente mit dem Finger antippt. Das ist dann praktisch, wenn man eine “Kiosk-Anwendung” programmiert, bei der der Nutzer die Eingaben nur über den Bildschirm machen soll.

Mit CSS lässt sich der Mauszeiger ganz einfach ausblenden: Hier gibt man dem Wert “cursor” einfach die Eigenschaft “none”. Das klappt aber nicht mit allen Browsern: Während es auf dem Firefox und Chromium (unter Linux / Raspbian) funktioniert, akzeptiert der Chrome Browser dies nicht und zeigt den Mauszeiger weiterhin an. Hier kann es aber helfen, die Maus einmal zu bewegen, damit der Cursor nicht mehr gezeigt wird.

Mauszeiger ausblenden

Mit diesem einfachen Befehl kann man den Mauszeiger ausblenden, ohne ein Plugin oder zusätzliche Software zu installieren:

<style type="text/css">
html { cursor: none; }
</style>

Falls das nicht funktioniert, hilft vielleicht ein anderer Trick: Dabei wird dem Mauszeiger per CSS eine Grafik zugewiesen. Statt einem echten Bild nehmen wir eine transparente PNG Datei. Um einen zusätzlichen Aufruf zu sparen, kann man diese direkt als base64 Code in den CSS Befehl schreiben:

<style type="text/css">
html { cursor: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAMAAAAoyzS7AAAABlBMVEX///8AAABVwtN+AAAAAXRSTlMAQObYZgAAAA1JREFUeNoBAgD9/wAAAAIAAVMrnDAAAAAASUVORK5CYII='), auto;  
 }
</style>

 
Mauszeiger verstecken mit Javascript

Auch dies funktioniert im Firefox Browser, im Chrome muss die Maus ebenfalls kurz bewegt werden, damit der Browser den Zeiger versteckt:

<script type="text/javascript">
function hidecursor() {
   document.getElementsByTagName("HTML")[0].style.cursor="none";
}

hidecursor();
</script>

Funktioniert das nicht in dem zu verwendeten Browser, kann man den Mauszeiger auch über das Betriebssystem ausblenden: Hier kann man unter Umständen eine eigene (unsichtbare) Grafik als Zeiger-Bild auswählen. Das wirkt sich dann aber auf das gesamte Betriebssystem aus!