Hover-Effekte für Tabellenzellen mittels CSS

[nettesekel]

Wie man bei Tabellenzellen mittels CSS hover-Effekte (optische Veränderung bei Mouseover) erzielen kann, erklärt das folgende Tutorial.

Damit die Hover-Effekte auch im IE funktionieren, publiziert eure Website bitte unter dem DocType LOOSE.
In den neuen NOF-Versionen wählt ihr hierfür die HTML-Ausgabe "HTML 4.01", in älteren NOF-Versionen könnt ihr diesen Doctype mit Hilfe der SwissKnife-DocType-Komponente publizieren.

Die Komponente könnt ihr hier downloaden.
Hier könnt ihr nachlesen wie sie installiert wird.
Und hier findet ihr eine Anleitung zur Nutzung der Komponente.

[nettesekel]

In der folgenden Demo seht ihr 1 Tabellenzelle mit Inhalt, die bei Berührung mit der Maus ihre Hintergrundfarbe, Rahmenfarbe und ihre Textfarbe verändert.



Um diesen Effekt zu erzielen habe ich folgende Einfügungen vorgenommen:

------------------------------------------------------------------------------------------------
Code zum Einfügen zwischen den Head-Tags der Seite
------------------------------------------------------------------------------------------------

Code: HTML5

1. <style type="text/css">
2. td.zelle {border: 2px solid #000000; background:#FEDDF7; color:#2B2ED1;}
3. td.zelle:hover {border: 2px solid #FF0000; background:#ffffff;color:#808080;}
4. </style>

------------------------------------------------------------------------------------------------
Code zum Einfügen in den Zellen-Tag
------------------------------------------------------------------------------------------------

Code: HTML5

1. class="zelle"

[nettesekel]

------------------------------------------------------------------------------------------------
Erklärung zum Code
------------------------------------------------------------------------------------------------

Der Code besteht aus zwei Zeilen die CSS-Angaben enthalten.
Eine Zeile für den Standard-Zustand der Tabellen-Zelle und eine Zeile für den Hover-Zustand der Tabellenzelle.

Die Zeile für den Standard-Zustand setzt sich aus dem Kürzel für die Tabellenzelle...

Code: HTML5

1. td

...gefolgt vom Namen der CSS-Klasse...

Code: HTML5

1. .zelle

...gefolgt vom eigentlichen Inhalt der Klasse zusammen.

Code: HTML5

1. {border: 2px solid #000000; background:#FEDDF7; color:#2B2ED1;}

Hier wird die Rahmenstärke (2px), der Rahmenstil (solid) und die Rahmenfarbe (#000000) , die Hintergrundfarbe (#FEDDF7) sowie die Schriftfarbe (#2B2ED1) für den Standard-Zustand definiert.

------------------------------------------------------------------------------------------------

Die Zeile für den Hover-Zustand setzt sich fast identisch zusammen.
Sie beginnt ebenfalls mit dem Kürzel für die Tabellen-Zelle, gefolgt vom Namen der CSS-Klasse...

Code: HTML5

1. td.zelle

...nur folgt hier im Anschluss an den Namen der CSS-Klasse noch die Einfügung:

Code: HTML5

1. :hover

...und erst dann geht es mit den Style-Angaben für den Hover-Zustand der Zelle weiter.

Code: HTML5

1. {border: 2px solid #FF0000; background:#ffffff;color:#808080;}

[nettesekel]

Natürlich lassen sich auch verschiedene Zellen verschieden formatieren, wie ihr in der folgenden Demo unschwer erkennen könnt.




Hierzu müsst ihr einfach nur für jede Zelle die anders aussehen soll, eine weitere CSS-Klasse erstellen...

Code: HTML5

1. <style type="text/css">
2. td.zelle {border: 2px solid #000000; background:#FED........}
3. td.zelle:hover {border: 2px solid #FF0000; background:#FFF.....}
4.  
5. td.zelleA {border: 2px solid #000000; background:#FED........}
6. td.zelleA:hover {border: 2px solid #FF0000; background:#FFF.....}
7.  
8. td.zelleB {border: 2px solid #000000; background:#FED........}
9. td.zelleB:hover {border: 2px solid #FF0000; background:#FFF.....}
10.  
11. td.zelleC {border: 2px solid #000000; background:#FED........}
12. td.zelleC:hover {border: 2px solid #FF0000; background:#FFF.....}
13. </style>

...und der entsprechenden Zelle wieder ihre CSS-Klasse zuweisen.
In meinem Beispiel wären das die Klassen

zelle    >>  class="zelle"
zelleA  >>  class="zelleA"
zelleB  >>  class="zelleB"
zelleC  >>  class="zelleC"