Geschäftsführer, Webdesigner & Web-Entwickler, staatlich geprüfter Mediengestalter
Mit CSS lässt sich so ziemlich die gesamte Gestaltung einer Webseite beeinflussen. Das gilt auch für den Mauszeiger innerhalb einer Webseite. In diesem Artikel erklären wir, wie man den Mauszeiger mittels CSS ändern kann und welche verschiedenen Mauszeiger es gibt.
Der Mauszeiger auf einer Webseite wird automatisch vom verwendeten Browser vorgegeben — als Pfeil. Bei einem Hover / Mouse Over über z.B. einen Link erscheint standardmäßig eine Hand bzw. ein Finger, welcher die Möglichkeit einer Interaktion aufzeigen soll. Wer den Mauszeiger grundsätzlich oder eben für bestimmte Elemente bzw. Teilbereiche einer Webseite verändern möchte, kann dies ganz einfach und schnell per Cascading Style Sheets (CSS) über die Anweisung „Cursor“ tun. So kann der Maus-Cursor beispielsweise als Fadenkreuz oder Sanduhr dargestellt werden.
Tipp: Wir empfehlen aus Sicht der Usability einer Webseite keine gewohnten „Grundsätze“ zu verändern. Die „Klickbarkeit“ von Links mittels Hand/Finger Symbol ist beispielsweise für jeden verständlich und seit jeher in der Gewohnheit der Nutzer eingeprägt. Ein solches Detail einfach zu ändern, könnte für den Nutzer verwirrend sein.
Inhaltsverzeichnis
In den beiden nachfolgenden Beispielen zeigen wir, wie ein Element mit einem Zeigefinger-Mauszeiger (Pointer) und mit einem individuellen Bild ausgestattet wird.
.maus-beispiel {cursor: pointer;} .maus-beispiel-bild { cursor: url(maus.gif), auto }
Natürlich lässt sich die CSS-Anweisung cursor nicht nur auf z.B. CSS-Klassen anwenden, sondern z.B. auch auf <li> oder für Links allgemein <a>.
Die Cursor werden auf mobilen Endgeräten wie Smartphones und Tablets nicht angezeigt. Die CSS Anweisung Cursor hat somit keine Auswirkung.
Spannende Artikel und Infos zum Thema
Sie benötigen eine WordPress Agentur? Wir stehen als Ihre Experten zur Verfügung. Treten Sie mit uns in Kontakt und vereinbaren Sie ein unverbindliches Beratungsgespräch.
Die Sprache einer Website wird vielfach durch HTML-Tags übermittelt. Diese werden als HTML Sprachcodes bezeichnet und bestehen aus zwei Kleinbuchstaben. Festgelegt werden die HTML...
mehr lesen
Das WordPress Command Line Interface (kurz WP-CLI) bietet für alle, die mit dem Content Management System (CMS) WordPress arbeiten, einige Funktionen und kann dazu...
mehr lesen
Pagebuilder Plugin für WordPress funktionieren nach einem einfachen und zudem komfortablen Prinzip. Kinderleicht kann man damit eine Webseite aufbauen – oft sogar per Drag...
mehr lesen
Das Unix / Linux Dienstprogramm Cron ist auch für WordPress von Relevanz. Mithilfe von Cron können beispielsweise Befehle geplant werden oder auch Scripte gesteuert....
mehr lesen
Was bedeutet JSP? Bei der Bezeichnung JSP handelt es sich um eine Abkürzung für Java Server Page. Hierbei handelt es…
Was bedeutet Call-to-Action? Als Call-to-Action (CTA) wird eine Handlungsaufforderung bezeichnet, die Reaktionen einer bestimmten Zielgruppe herbeiführen soll. Auf einer Website…
Was ist eine Domain? Die Domain beschreibt einen Teil des Domain Name System (DNS). Das DNS verbindet die maschinenlesbaren IP-Adressen…