Hallo liebe Gemeinde,

ich habe ein Problem mit dem Hovereffekt von Tabellenzellen. Ich habe zwar im Forum gesucht und auch gefunden, aber bei mir funktioniert es trotzdem nicht.

Also ich habe eine Tabelle mit einem blauen Farbverlauf im Hintergrund. Dieser Farbverlauf soll bei einem MouseOver auf die Tabellenzelle grau werden. Und genau das macht es nicht. Bei meinen Tests wird zwar die Schriftfarbe anders aber nicht der Hintergrund - auch nicht, wenn ich nur eine einzelne Farbe nehme. Hat jemand einen Plan, woran das liegen könnte? Hier das CSS (die Zellen werden wechselseitig in unterschiedlichem Blau dargestellt, daher die Verschachtelung gerader/ungerader Elemente):

table.tbl_xyz td:hover{

        color:#666699;

	background-color:#666;	

	background-color: rgba(102 102 102 0.5); 

	background-image: -webkit-linear-gradient(#ccc 0%, #666 100%);

	background-image: -moz-linear-gradient(#ccc 0%, #666 100%);

	background-image: -o-linear-gradient(#ccc 0%, #666 100%);

	background-image: linear-gradient(#ccc 0%, #666 100%);

}


table.tbl_xyz tr:nth-child(odd) td:nth-child(even){

	background-color:#3c76be;	

	background: rgba(59 117 188 0.5); 

	background-image: -webkit-linear-gradient(#81c8ff 0%, #3c76be 100%);

	background-image: -moz-linear-gradient(#81c8ff 0%, #3c76be 100%);

	background-image: -o-linear-gradient(#81c8ff 0%, #3c76be 100%);

	background-image: linear-gradient(#81c8ff 0%, #3c76be 100%);

}

Wäre toll, wenn jemand die Lösung kennt.

Liebe Grüße

Huschel

Ich hab´s! Ich muss mich bei der Hover-Anweisung nicht nur auf die Tabellenzellen allgemein beziehen, sondern ich muss die geraden/ungeraden Tabellenzeilen mit berücksichtigen. Also demnach muss die Hover-Anweisung so aussehen:

table.tbl_yxz tr:nth-child(even) td:hover, table.tbl_xyz tr:nth-child(odd) td:hover {

	color:#9999;

	background-color:#666;	

	background-color: rgba(102 102 102 0.5); 

	background-image: -webkit-linear-gradient(#ccc 0%, #666 100%);

	background-image: -moz-linear-gradient(#ccc 0%, #666 100%);

	background-image: -o-linear-gradient(#ccc 0%, #666 100%);

	background-image: linear-gradient(#ccc 0%, #666 100%);

}

Ist doch immer wieder schön, wenn man selbst dahinter kommt....

Liebe Grüße

Huschel