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.
Wer eine Website bei HostEurope betreibt, kennt das Problem: Die Fehler-Logs im KIS (Kunden-Interface) sind oft leer oder enthalten nur spärliche Informationen. Das macht...
mehr lesen
Das Content-Management-System WordPress basiert auf PHP, einer der gängigsten Programmiersprachen im Web. Ohne PHP funktioniert WordPress nicht. Umso wichtiger ist es somit, dass nicht...
mehr lesen
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
Was ist ein Slider? Als Slider bezeichnet man auf Webseiten einen Contentbereich, der nach einiger Zeit automatisch wechselt. Auf Deutsch…
Was ist? Black Hat SEO Die Begrifflichkeit Black Hat SEO leitet sich aus der Hacker-Szene ab. Dort wurden Hacker mit…
Was bedeutet RSS? RSS steht als Abkürzung für Really Simple Syndication und lässt sich ins Deutsche mit „echt einfache Verbreitung“…