CSS: Links nur unterstreichen wenn Maus darüber fährt
Frage von Gast | Letztes Update am 24.11.2023 | Erstellt am 01.02.2014
Ich habe kürzlich auf einer Internetseite gesehen, dass die Unterstreichungen der Links nur dann angezeigt wurden, wenn man mit dem Mauszeiger darüber gefahren ist. Ansonsten wurden die Links nur farblich wie normaler Text gekennzeichnet.
Ich finde das sehr elegant und würde es auch in meiner eigenen Homepage nutzen. Weiß jemand, wie man das mit CSS oder JavaScript programmieren kann?
Ähnliche Themen
CSS-Stylesheets in HTML einbinden
Tutorial | 0 Kommentare
jQuery: CSS Stylesheet Switcher
Tutorial | 1 Kommentar
Website Performance: Javascript und CSS komprimiert ausliefern und Ladezeiten verkürzen
Tutorial | 0 Kommentare
Bilder, CSS, JS und Seiten neu laden trotz Browser-Cache
Tipp | 2 Kommentare
Mouseover Buttons mit CSS ohne Nachladen
Tutorial | 0 Kommentare
Pipette: Beliebige Farben von überall auf dem Bildschirm aufnehmen
Tutorial | 1 Kommentar
Hintergrund einer Website verdunkeln (Gray Out Effekt)
Tutorial | 0 Kommentare
Wichtiger Hinweis
Bitte beachten Sie: Die Beiträge auf askingbox.de sind Beiträge von Nutzern und sollen keine professionelle Beratung ersetzen. Sie werden nicht von Unabhängigen geprüft und spiegeln nicht zwingend die Meinung von askingbox.de wieder. Mehr erfahren.
Jetzt mitmachen
Stellen Sie Ihre eigene Frage oder schreiben Sie Ihren eigenen Artikel auf askingbox.de. So gehts.
Füge einfach deiner CSS-Datei oder deinen CSS-Definitionen auf deiner Seite die folgenden Zeilen hinzu:
a {text-decoration:none;} a:hover {text-decoration:underline;}Dann werden Links nur noch beim Überfahren mit der Maus unterstrichen.
Zur Erklärung: Links haben die Bezeichnung "a" in HTML. Mit "text-decoration: none" schalten wir die Unterstreichung für das Element "a" ab, so dass Links nicht mehr unterstrichen angezeigt werden.
Der Selektor ":hover" steht für das Mouse Hover (Überfahren mit der Maus). Hier setzen wir das Element "a" auf "underline", womit beim Überfahren die Eigenschaft "text-decoration" auf "underline" gesetzt wird und ansonsten auf "none" steht.
Wichtig: In diesem Zusammenhang sollte nicht unerwähnt bleiben, dass der Nutzer einer Internetseite erkennen soll, wo sich ein Link befindet und wo nicht. Aus diesem Grund sollte man die Links noch auf irgendeine andere Weise (zum Beispiel farblich) kennzeichnen, dass der Nutzer sich noch auf der Seite zurechtfinden kann.
Letztes Update am 24.11.2023 | Erstellt am 01.02.2014