CSS: Hyperlinks unterstreichen, sobald Mauszeiger darüber steht

In Menüs macht es sich gut, wenn ein Hyperlink unterstrichen erscheint, sobald der Mauszeiger darüber steht. Das folgende, vereinfachte Beispiel zeigt, wie es geht:

<!DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.0 Strict//EN'>

<html>

<head>

<title>Test</title>

<style type='text/css'>

a { text-decoration: none}

a:hover {text-decoration: underline}

</style>

<script type='text/javascript'></script>

</head>

<body>

<a href="https://strassenprogrammierer.de">Der Strassenprogrammierer</a><br/>

<a href="http://tippscout.de">Tippscout</a>

</body>

</html>

Das Dokument zeigt zwei Hyperlinks an: Mit a {text-decoration: none} schaltet CSS die Unterstreichung für die Hyperlinks ab. Sobald die Maus über einem Link steht, sorgt a:hover dafür, dass eine Unterstreichung erscheint.

Mit Hilfe einer CSS-Anweisung bewirken Sie, dass ein Link nur dann unterstrichen erscheint, sobald der Mauszeiger darüber steht.

Link per CSS formatiert

Aber Achtung: Nutzen Sie diese Gestaltungsmerkmale nur dann, wenn sich für den Benutzer aus dem Zusammenhang erschließt, dass es sich um einen Hyperlink handelt. Das ist zum Beispiel in einer Menüauswahl der Fall. In Texten sollten Hyperlinks möglichst immer unterstrichen erscheinen – der Nutzer ist es einfach gewohnt, dass Querverweise mit Unterstreichungen gekennzeichnet sind.

Ähnliche Beiträge