14.02.2009

Hover-Effekt auf größere Bereiche anwenden

Oft besteht der Wunsch, den "Hover-Effekt" nicht auf einen Link, sondern auf einen größeren Textbereich anzuwenden. Das könnte - nehmen wir die Themenanreißer der Startseite unserer CSS-Fundgrube zum Beispiel - dann so aussehen:

Recht einfach wäre dieser Effekt, wenn wir den Hyperlink jedem beliebigen Element zuweisen könnten.
Weil das der Internet Explorer bis Version 6 jedoch nicht kann, müssen wir uns anderweitig behelfen.
Zu beachten ist dabei, dass wir innerhalb von <a></a> lediglich Inline-Elemente verwenden dürfen. In Betracht kommen für unseren Zweck z.B. strong, em oder span.

Für die Anordnung der Textblöcke bedienen wir uns einer ul-Liste und jeden Textblock schreiben wir in einen li-Tag. Wollt ihr auf die Liste verzichten, weil ihr z.B. nur einzelne, sporadische Textblöcke verwendet, dann solltet ihr a noch eine Breite und ggf. Abstände zuweisen.
Wichtig ist, dass wir das Inline-Element a mit einem display: block; versehen, damit sich der Hovereffekt auf die gesamte Fläche erstreckt.
Da wir für die Überschrift keine Blockelemente verwenden dürfen, ersetzen wir das eigentliche Element h durch das Inline-Element strong.
Und weil innerhalb a kein weiteres a vorkommen darf, behelfen wir uns bei der Formatierung von "weiter..." mit einem em.

Um Formatierungskonflikte mit gleichartigen Elementen zu vermeiden, verwenden wir jeweils eine eigene CSS-Klasse, hier mit "demo" bezeichnet.
Die einzelnen Farb-, Schrift-, Abstands- und Rahmendefinitionen könnt ihr nach eigenem Gusto vornehmen.
In unserem Beispiel wurden folgende CSS-Angaben verwendet:

ul.demo {
list-style-type: none;
width: 500px;
}

li.demo {
margin-top: 5px;
height: 1%; /*--für IE <7--*/
}

a.demo {
display: block;
}

a.demo:link, a.demo:visited {
background: #F1EDC2;
border: 1px solid #CDBE70;
color: #000;
padding: 5px;
text-decoration: none;
}

a.demo:hover{
background: #CDBE70;
border: 1px solid #F1EDC2;
color: #191970;
padding: 5px;
text-decoration: none;
}

strong.demo {
font-size: 1em;
font-weight: 600;
}

em.demo {
color: #f00;
font-style: italic;
font-weight: 600;
}

HTML:

<ul class="demo">

<li class="demo">
<a class="demo" href="http://www.ohne-css.gehts-gar.net/0058.php">
<strong class="demo">Schattenränder und Schattenboxen</strong><br>
Einen besonderen Pepp erhält eine Website durch einen Schatteneffekt an den Rändern.
<em class="demo">weiter ...</em>
</a>
</li>

<li class="demo">
<a class="demo" href="http://astore.amazon.de/cssfun-21" target="_blank">
<strong class="demo">CSS-Fachliteratur</strong><br>
Hier gibt es viel CSS-Fachliteratur oder Geschenkgutscheine für Webmaster.
<em class="demo">weiter ...</em>
</a>
</li>

</ul>

Quelle:
Die Anregung zu dieser Anleitung stammt aus Buch Webdesign mit CSS von Jens Meiert und Ingo Helmdach.

nach oben