CSS: Mauszeiger ausblenden – So gehts!

Oft ist der Mauszeiger nützlich aber auf gewissen Webseiten kann er auch ganz schön nerven. Aber mit cursor:none kannst du den Mauszeiger ganz leicht ausblenden.

Mauszeiger mit CSS ausblenden

Um den Mauszeiger in CSS auszublenden, gibt es zwei Hauptmethoden:

cursor: none:

Einfachste und gebräuchlichste Methode.

element {
  cursor: none;
}

Ergebnis: Der Mauszeiger wird über dem angegebenen Element zu einem transparenten Pfeil (oder einem anderen systemdefinierten „nichts“-Cursor).

Verwendung eines transparenten Bildes:

• Bietet mehr Flexibilität und Kontrolle.
• Erstellung eines transparenten PNG-Bildes:
  • Erstelle ein neues Bild mit der gewünschten Größe.
  • Fülle das Bild mit einer einheitlichen transparenten Farbe (z. B. RGBA(0, 0, 0, 0)).
  • Speichere das Bild als PNG-Datei (z. B. „cursor.png“).

element {
  cursor: url('cursor.png'), auto;
}

Ergebnis: Der Mauszeiger wird über dem angegebenen Element zu einem transparenten Bild (in diesem Fall einem 1×1 Pixel großen transparenten PNG).

Vorteile:

• Ermöglicht die Verwendung eines individuellen Designs für den Mauszeiger.
• Kann in Kombination mit cursor: pointer verwendet werden, um den Mauszeiger bei Hover-Effekten wiederherzustellen.

Nachteile:

• Erfordert die Erstellung eines transparenten Bildes.
• Kann in einigen älteren Browsern nicht optimal dargestellt werden.

Fazit

In den meisten Fällen ist die Verwendung von cursor: none die einfachste und beste Lösung, um den Mauszeiger in CSS auszublenden. Wenn du jedoch mehr Kontrolle über das Aussehen des Mauszeigers benötigst, kannst du die Methode mit dem transparenten Bild verwenden.