blog.tigion.de

Eben beim Lesen von Opera Turbo Test-Version beim Nasendackel viel mir der Kommentar von ad zu seiner verwendeten Headergrafik auf:

… ja, sonst funktioniert der Hover-Effekt nicht, mit CSS hätte ich nur die komplette Schrift wechseln können …

So ein Hovereffekt im Header geht natürlich auch mit CSS, ohne dass dazu ein extra Bild von nöten ist. Dazu bspw. einfach ein paar span-Bereiche strategisch einstreuen und schon kann man per :hover differenzierter die Effekte beeinflussen.

Aber wie?

Nun … im Header bzw. der Hauptüberschrift “blogs are dead*” gibt es 3 Bereiche, welche auf ein Maushover reagieren wollen:

1. blogs are de … wechselt von schwarz zu rot
2. ad … wechselt von rot zu schwarz
3. * … wechselt nicht die Farbe

Für den ersten Bereich verwendet man einfach den Standardeffekt und die beiden weiteren Bereiche kapselt man in:

• <span class=”highlight”>ad</span>
• <span class=”nohighlight”>*</span>

Hier der komplette HTML Abschnitt:

<div id="test">
  <h1><a href="">blogs are de<span class="highlight">ad</span><span class="nohighlight">*</span></a></h1>
</div>

Im zugehörigen Stylesheet legt man nun das unterschiedliche Verhalten bei :hover auf den Link für das Standardverhalten und die einzelnen span-Bereiche fest:

#test h1 a {
  color: #000;
  text-decoration: none;
}

#test h1 a .highlight {
  color: #c00;
}

#test h1 a:hover {
  color: #c00;
}

#test h1 a:hover .highlight, #test h1 a:hover .nohighlight {
  color: #000;
}

Das (fast) vergessene Beispiel

Es wäre zu mindest eine Lösung, bei diesem schicken schlichten Layout von ad, auch ohne einer extra Headergrafik für den Schriftzug den Effekt zu erreichen.