tag TD + hover + CSS

[KLINKO]

è possibile utilizzando i css creare un effetto roll over per delle righe di una tabella?
cioè cambiare il colore della cella TD al passaggio del mouse sopra di essa?

grazie

[salasir]

Certo!

.tabdati1 tbody tr:hover { background: #f0f0fe url(../Image/shadow.png) bottom left repeat-x; }

C'è solo un piccolo problema ...

Non funziona con IE che gestisce l'hover solo sul tag <a>. Quindi si deve utilizzare del codice js.

[KLINKO]

grazie
cè molto codice js?

per fare una ricerca cosa mi consigli?

[salasir]

Devo trovare una discussione in cui indicavo il codice per un altro tag e la tecnica da utilizzare.

Appena la trovo te la segnalo. (Penso domani mattina, se resisti.... )

[KLINKO]

grande!

[salasir]

Allora, eccomi qui.

javascript

sfHover = function() {

----- Primo caso: generico sul tag "TR" -----------------
	var sfEls = document.getElementsByTagName("tr");
	for (var i=0; i<sfEls.length; i++) {
		sfEls[i].onmouseover=function() {
			this.className+=" sfhover";
		}
		sfEls[i].onmouseout=function() {
			this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
		}
	}

----- Secondo caso: sul tag "TR" solo dell'"ID" indicato -----------------
	var sfEls = document.getElementById("tabdati").getElementsByTagName("tr");
	for (var i=0; i<sfEls.length; i++) { 
		sfEls[i].onmouseover=function() {
			this.className+=" sfhover";
		}
		sfEls[i].onmouseout=function() {
			this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
		}
	}

}
if (window.attachEvent) window.attachEvent("onload", sfHover);

CSS

#tabdati1 tbody tr:hover { background: #f0f0fe url(../Image/shadow.png) bottom left repeat-x; }
#tabdati1 tbody tr.sfhover { background: #f0f0fe url(../Image/shadow.png) bottom left repeat-x; }

Come vedi puoi gestire l'hover su qualsiasi tag anche per IE duplicando il pezzo per ogni tag.
Nel CSS devi duplicare la definizione della pseudoclasse :hover con una classe sfhover che viene inserita al volo da js.

Ti consiglio di inserire la parte js in un file esterno e di includerlo nelle pagine con un commento condizionale in modo da attivarlo solo per IE 6:

<!--[if lte IE 7]>
	<script src="Jscript/jscriptIE7.js" type="text/javascript"></script>
<![endif]-->

Spero di averti detto tutto e di essere stato chiaro.