Ein kleiner CSS Tipp für ad

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:

  • ad
  • *

Hier der komplette HTML Abschnitt:

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.