✔ CSS Stylesheet: Hover-Effekt in Tabelle nur unter Firefox - keine Funktion in IE

Status
Nicht offen für weitere Antworten.
d2wap

d2wap

Erfahrenes Mitglied
Hallo zusammen,

da ich gerne eine Tabelle formatieren möchte, indem ich die Zeilen abwechselnd farbig mache und beim Mouseover (hover) die Zeile die Farbe wechselt.
Alles kein Problem.
Leider funktioniert mein Script nur im Firefox - jedoch nicht im IE. Weder unter 4, 5, 6 noch 7 tut es.
Nur die Zellen sind abwechselnd gefärbt - aber der Hover will und will nicht.

Anbei der Auszug aus dem CSS und eine Beispieltabelle:

PHP: 
table.tablehover {
	background-color: #FFFFFF;
	margin: 0px;
	padding: 0px;
	border: 1px solid #ddd;
	border-spacing: 0px;
	width: 100%;
	border-collapse: collapse;
}

table.tablehover th {
	margin: 0px;
	padding: 6px 4px 2px 4px;
	height: 25px;
	background: url(../images/background.jpg);
	background-repeat: repeat;
	font-size: 11px;
	color: #000;
}
table.tablehover th.title {
	text-align: left;
}

table.tablehover th a:link, table.tablehover th a:visited {
	color: #c64934;
	text-decoration: none;
}

table.tablehover th a:hover {
	text-decoration: underline;
}

table.tablehover tr.row2 {
	background-color: #F9F9F9;
}
table.tablehover tr.row1 {
	background-color: #FFEFF0;
}
table.tablehover td {
	border-bottom: 1px solid #e5e5e5;
	padding: 4px;
}
table.tablehover tr.row2:hover {
	background-color: #CCCCCC;
    
}
table.tablehover tr.row1:hover {
	background-color: #CCCCCC;
}
table.tablehover td.options {
	background-color: #ffffff;
	font-size: 8px;
}


PHP: 
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
</style>
<link href="test.css" rel="stylesheet" type="text/css">
<title>Test CSS</title>
</head>
<body>

<table class="tablehover">
<th>Testtabelle mit verschiedenfarbigen Rows und Hover-Effekt</th>
<tr class="row1">
<td>test</td>
<td>test test test</td>
</tr>
<tr class="row2">
<td>test</td>
<td>test test test</td>
</tr>
<tr class="row1">
<td>test</td>
<td>test test test</td>
</tr>
<tr class="row2">
<td>test</td>
<td>test test test</td>
</tr>
<tr class="row1">
<td>test</td>
<td>test test test</td>
</tr>
<tr class="row2">
<td>test</td>
<td>test test test</td>
</tr>
<tr class="row1">
<td>test</td>
<td>test test test</td>
</tr>
</table>

</body></html>
 
Wenn Sie sich das CSS angeschaut hätten, würden Sie sehen, dass der Hover bereits eingebaut ist und funktioniert.

Das einzige Problem ist, dass es nicht im IE funktioniert!
Wie die Tagstellung und die Möglichkeiten sind ist mir bekannt.
 
Hi,

die Vorgängerversionen des IE7 (4 bis 6) unterstützen die :hover-Pseudoklasse ausschliesslich für das a-Element.

Dass es derzeit im IE7 nicht funktioniert, liegt daran, dass das Dokument ohne Dokumenttyp-Deklaration im Quirksmodus übergeben wird, oder mit anderen Worten ausgedrückt: im Standardsmode funktioniert das Stylesheet auch im IE7.

Diesen Darstellungsmodi erzielst du beispielsweise mit diesen Doctypes:

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
          "http://www.w3.org/TR/html4/loose.dtd">
Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
Für die älteren IE-Versionen bis einschliesslich IE6 benötigst du JS, um die Hintergrundfarbe der Tabellenzeilen zu tauschen.

Hierfür legst du jeweils eine weitere Klasse an:

Code: 
table.tablehover tr.row1:hover, table.tablehover tr.row1_hover {
    background-color: #CCCCCC;

}
table.tablehover tr.row2:hover, table.tablehover tr.row2_hover {
    background-color: #CCCCCC;
}
und tauscht sie per JS:

Code: 
<tr class="row1" onmouseover="this.className='row1_hover'" onmouseout="this.className='row1'">

<tr class="row2" onmouseover="this.className='row2_hover'" onmouseout="this.className='row2'">
Achja, entferne noch im Dokumentheader das verwaiste </style>-Tag.
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück