CSS Hover

[Rene]

So ich habe bis vor kurzem immer mit JS den Mousover Effekt gelöst.

Habe jetzt alles auf CSS umgestellt, muss aber merken, das ich da paar problemchen habe:

1. HOver geht nur wenn ein Link da ist (egal wie ich es in der css datei definier)
2. hover wird nur in einer spalte gemacht anstatt in de rganzen zeile.

Wie macht ich einen CSS Hover für Tabellen?
Egal ob ein Link oder nicht drin ist.

[Manuel]

Hi Rene!

Hast du dir dazu mal eine Beispieldatei gemacht, an der man das leicht nachvollziehen kann? Wie genau schaut deine CSS-Klasse aus? Wenn du mit a:hover arbeitest ist es klar, aber ich denke mal dass du das schon richtig gemacht hast, nur vielleicht ein kleiner Fehler drin steckt.

Also wie gesagt, zeig einfach mal den Quellcode, denn gehen tut es definitiv

[SilentStormer]

der IE stellt diesen Hover allerdings nicht dar - geht nur mit vernünftigen Browsern ^^

[Rene]

ALso dann schreib ich mal:

Code: Alles auswählen

.contenttable {
   padding-left: 0px;
   margin: 0px;
}
.contenttable a {
   padding-left: 0px;
   display: block;
}
.contenttable a:hover {
   background-color: #B0D5F2;
   padding-left: 0px;
   display: block;
}

Im moment habe ich es mit a, da es ohne das a auch nich geht.
Habs auch schon statt a mit tr oder td versucht.
Kein plan =)

PS: Ich benutze FF

Werd auch nochmal bischen dran rumbasteln.
Vielleicht bekomm ich es noch hin.

[cyrano]

also der FF unterstützt :hover für tr, td oder th Elemente.
Der IE unterstützt :hover bis zur Version 6 nur für das a Element. Ab der 7er Version unterstützt er es für alle Elemente.

Also müsste

Code: Alles auswählen

contenttable tr:hover {
   background-color: #B0D5F2;
}

im FF funktionieren.

Unter http://icant.co.uk/csstablegallery/index.php?css=64#r64 kannst den Effekt sehr schön sehen. Schau dir da mal den CSS- Code an.
In der Datei "Poetryforbrowsers.css" ist irgedwo tbody tr:hover deklariert.
Änderer einfach mal die Hintergrundfarben, und du sehst wie das funktioniert.