Mauszeiger verändern mit CSS

Du kannst mit CSS unter dem Strich sehr viele Dinge gestalten und anpassen. Du kannst dabei sogar den Mauszeiger verändern lassen. So kannst du diesen bspw. zu einem Fragezeichen ändern, wenn man mit ihm über einen bestimmten Bereich der Website fährt.

Wie du mit CSS den Mauszeiger verändern kannst, zeige ich dir dabei in diesem Artikel.

Mit CSS den Mauszeiger verändern

Damit du die Darstellung vom Mauszeiger verändern kannst, musst du zuerst das Attribut cursor: in dein Stylesheet einbauen. Am besten eignet sich dabei die Erstellung einer eigenen CSS Klasse.

Hast du das gemacht, kannst du dann einzelne Elemente deiner Website mit dieser Klasse versehen. So kannst du das CSS Snippet auch wiederverwenden.

Nachstehend findest du ein Beispiel, wie das ganze bspw. aussehen könnte.

Beispiel:

<html>
  <head>
    <title>Mit CSS den Mauszeiger verändern</title>
    <style>
    a.hilfe {
    cursor: help;
    }
    </style>
  </head>
  <body>
    <p>Hier kommst du bspw. zum <a href="hilfe.htm" class="hilfe">Hilfebereich</a></p>
  </body>
</html>

Erklärung:

Im obigen Beispiel habe ich also für das a-Tag eine neue Klasse definiert. Diese verändert schließlich den Cursor in ein Fragezeichen. Da es nur für den Link gilt, geschieht dies erst dann, wenn der Nutzer mit dem Cursor über den Link fährt.

Das Attribut curser: help; ist aber nicht das einzige Attribut, was du nutzen kannst. Es gibt noch weitere Attribute, mit denen du den Mauszeiger mit CSS verändern kannst.

Die nachstehenden Beispiele sind Live-Beispiele. Bewege einfach deinen Mauszeiger über den Text in der Liste und du solltest eine Veränderung des Mauszeigers feststellen können.

  • cursor:all-scroll;

  • cursor:col-resize;

  • cursor:default;

  • cursor:e-resize;

  • cursor:grab;

  • cursor:grabbing;

  • cursor:help;

  • cursor:move;

  • cursor:n-resize;

  • cursor:no-drop;

  • cursor:not-allowed;

  • cursor:nw-resize;

  • cursor:pointer;

  • cursor:progress;

  • cursor:row-resize;

  • cursor:text;

  • cursor:vertical-text;

  • cursor:w-resize;

  • cursor:wait;

Hinweis:

Du solltest die Effekte dabei nur passend zur jeweiligen Aktion benutzen. Du setzt durch diese CSS Angaben folglich die System-Standards außer Kraft. Im schlimmsten Fall verwirrst du die Nutzer, weil du den Cursor nicht wie gewohnt einsetzt.

Browser Test

Die oben genannten CSS Snippets habe ich dazu in folgenden Browsern getestet.

  • Google Chrome 74
  • Mozilla Firefox 66
  • Microsoft Edge (nicht Chromium)
  • Microsoft Internet Explorer 11 (Windows 10)

Die genannten Browser zeigen die Snippets dabei richtig an. Ich kann jedoch leider nicht sagen, ob auch in hier nicht genannte Browser diese CSS Snippets korrekt darstellen.