HTML/CSS tr:hover funktioniert nicht

[Zyklop38]

Hallo,

ich bin grad dabei ein kleines Layout zu erstellen und habe da ein Problem mit der Tabelle. Funktioniert alles einwandfrei außer tr:hover . Da tut sich garnichts, weder im IE, Firefox noch Opera.

td:hover hingegen funktioniert einwandfrei, ist aber nicht das, was ich will .

Hier mal mein CSS und HTML:

table {
    border:0px;
    margin:10px;
    border-collapse:collapse;
}

tr:hover { 
    background-color: #eeeeee; 
}

th {
    padding:3px;
    background-color:#eeeeee;
    border-bottom:3px solid #fe7b09;
    border-top:1px solid #fe7b09;

}

td {
    padding:3px;
    border-bottom:1px solid #fe7b09;
}

<table>
            <tr>
                <th>Artikel</th>
                <th>Preis</th>
                <th>Anzahl</th>
            </tr>
            <tr>
                <td>Buchstabensuppe</td>
                <td>0,99 €</td>
                <td>100</td>
            </tr>
            <tr>
                <td>Seife</td>
                <td>3,80 €</td>
                <td>100</td>
            </tr>
</table>

Hat jemand eine Idee, woran es liegt / liegen könnte?

Hab nun schon viele Seiten abgegrast aber scheinbar habe ich einfach irgendwo was falsch gemacht... ich kann allerdings nicht herausfinden, was.

 

[flaschenkind]

tr:hover td

 

[theHacker]

Ein tr-Element hat keine sichtbare Hintergrundfarbe. Du meinst

tr:hover td

Ich sags dir aber gleich: IE mag keine :hover außer auf a-Elementen.
Obs mittlerweile in IE7 oder IE8 besser is, weiß ich nicht. Ich weiß nur, dass dir der IE6 was pfeift.

edit:
Jo, sag ich ja

 

[TerraTux]

Möglicherweise, weil TR keinen "Standard" hat. Ich habe soetwas auch, bei mir hat jedes TR allerdings eine Klasse, und der Klasse habe ich dann zusätzlich noch eine :hover-Definition gegeben...und dat funktioniert.

Also:

<tr class="bg1h">....</tr>

.bg1h { background-color: #fff; }
.bg1h:hover { background-color: #eee; }

Eigentlich sollte es aber auch direkt über tr{} und tr:hover{} gehen, gilt dann aber auch für ALLE Tabellen.

Nachtrag:
was drüber steht, ist per Def auch korrekter...funktioniert aber über die CSS-Klassen. Im IE6 ungetestet, IE7 und 8 machen das aber mit. Andernfalls bleibt noch JS...

Gruß

 

[Zyklop38]

tr:hover td

Klappt wunderbar. Und wie bereits gewarnt wurde allerdings nicht im IE. Leider funktioniert die Variante mit der Klasse auch nicht im IE. Naja, will dafür jetzt nicht extra JS einbauen, da es halt eben nur ein "hover"-Effekt ist und nicht wesentlich zum Layout beiträgt.

Vielen Dank für eure Hilfe !

 

[topfkanne]

Eben! Für die cleveren User mit modernen Browsern soll ruhig auch ein Mehrwert geboten werden!

 

[No5251]

Für das nächste mal: https://de.selfhtml.org/

... da werden Sie geholfen!


P.S: Versucht IE-Nutzer zu einem Update zu bewegen:

https://browserupdate.org/