✔ Tabelle-Hover Problem

[Siln]

Auf dieser Seite:
http://www.elpdistribution.com/shop/index.php?cPath=30
sieht man in der Mitte (dort wo Artist, Title, Catalog, usw. steht) die hover-Funktion die ich vergeben habe.
Die sieht so aus:

td A.tdhoverlist:hover {
  background-color:#3e687c;
  text-decoration: none;
  vertical-align: middle;
}

td A.tdhoverlist {
  width: 100%;
  height: 100%;
  background-color:#336075;
  display: inherit;
  outline: solid;
  outline-width: 1px;
  outline-color: #255369;
  vertical-align: middle;
}

Wie bekomme ich es hin, dass wenn ich über eines der Felder gehe, nicht nur das einzelne Feld hervorgehoben wird, sondern die komplette Zeile? Also z.B. die Zeile in der "Kupon Zoom In curfew002 Curfew Records 12" steht.

 

[Maik]

Lösungsvorschlag:

tr.normal {
background-color: #336075;
}

tr.hover {
background-color: #3e687c;
}

<tr class="normal" onmouseover="this.className='hover'" onmouseout="this.className='normal'">
...
</tr>

Nachtrag:

In den modernen Browsern, zu denen der IE nicht zählt, kannst Du es auch ohne JavaScript realisieren:

tr {
background-color: #336075;
}

tr:hover {
background-color: #3e687c;
}

 

[Gumbo]

Alternativ – ebenfalls mit JavaScript-Unterstützung:

<table class="foobar">
	…
</table>

.foobar tr {
	background-color: #336075;
}
.foobar tr:hover,
.foobar tr.hover {
	background-color: #3E687C;
}

function addClassName(elem, className) {
	removeClassName(elem, className);
	elem.className = elem.className + " " + className;
}
function removeClassName(elem, className) {
	var regexp = new RegExp("\s*" + className + "\s*");
	elem.className = elem.className.replace(regexp, "");
}

window.onload = function() {
	var tableElements = document.getElementsByTagName("table");
	for(var i=0; i<tableElements.length; i++) {
		if( !tableElements[i].className.match(/\s*foobar\s*/) ) {
			continue;
		}
		var trElements = tableElements[i].getElementsByTagName("tr");
		for(var j=0; j<trElements.length; j++) {
			trElements[j].onmouseover = new Function("addClassName(this, 'hover')");
			trElements[j].onmouseout = new Function("removeClassName(this, 'hover')");
		}
	}
}

 

[Siln]

Super, vielen Dank!