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. Das funktioniert bspw. wie folgt.

 

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.

Neben dem Attribut cursor: help; lassen sich dabei auch die nachstehenden Attribute verwenden. Wenn du deinen Mauszeiger über die einzelnen Punkte hier schweben lässt, kannst du die Veränderung des Mauszeigers direkt sehen.

  • cursor:all-scroll;

  • cursor:col-resize;

  • cursor:default;

  • cursor:e-resize;

  • cursor:hand;

  • 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.

 


Dir gefällt dieser Artikel?

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.