Cambiare il CSS alle OPTION di una select

Ultrabyte · 15-04-2008, 17:00

Salve , ho un problema per quanto riguarda un abbellimento grafico per una select.

Il mio scopo sarebbe quello di trovare il modo ( funzionante almeno x IE6 e FireFox ) di modificare il background -color e la grandezza del font sull' onmouseover delle option. Pensavo fosse cosa facile visto che con Firefox bastava settare option:hover e il gioco era fatto. Poi ahimè ho constatato da subito però che su IE6 non andava affatto perche non è supportato l'attributo :hover di conseguenza mi sono scervellato nel trovare qualche soluzione ma nessuna funzionante. Vi posto anche qualche riga di codice con cui poter cominciare.

Copiando e incollando questa porzione di codice presa da un esempio bastato sulle liste funziona

Codice:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<HTML xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><HEAD><TITLE>Suckerfish :hover example</TITLE>
<META http-equiv=Content-Type content="text/html; charset=windows-1252">
<STYLE type=text/css media=all>BODY {
	FONT: 100% arial, helvetica, sans-serif
}
H1 {
	FONT-SIZE: 1.5em; COLOR: orange
}
A {
	COLOR: #006; TEXT-DECORATION: none
}
P:hover {
	COLOR: #ccc
}
P.sfhover {
	COLOR: #ccc
}
P:hover A {
	COLOR: blue; TEXT-DECORATION: underline
}
P.sfhover A {
	COLOR: blue; TEXT-DECORATION: underline
}
P A:hover {
	COLOR: orange
}
</STYLE>

<SCRIPT type=text/javascript><!--//--><![CDATA[//><!--

sfHover = function() {
	var sfEls = document.getElementsByTagName("P");
	alert(this);
	alert(sfEls.length);
	alert("PRIMA "+this.className);
	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);

//--><!]]></SCRIPT>

<META content="MSHTML 6.00.2900.2873" name=GENERATOR></HEAD>
<BODY>
<H1>Suckerfish :hover</H1>
<P>An example accompanying the <A 
href="http://www.htmldog.com/articles/suckerfish/hover/">Suckerfish :hover 
article</A> in <A href="http://www.htmldog.com/">HTML Dog</A>.</P>
<P>Move your cursor over the paragraphs to reveal any links that might be 
contained within them.</P>
<P>Lorem ipsum <A 
href="http://www.htmldog.com/articles/suckerfish/hover/example/#">dolor</A> sit 
amet, consectetuer adipiscing elit. <A 
href="http://www.htmldog.com/articles/suckerfish/hover/example/#">Suspendisse</A> 
egestas ultricies pede. Phasellus suscipit blandit risus. <A 
href="http://www.htmldog.com/articles/suckerfish/hover/example/#">Praesent</A> 
nonummy. <A href="http://www.htmldog.com/articles/suckerfish/hover/example/#">In 
erat</A>. Duis nibh pede, <A 
href="http://www.htmldog.com/articles/suckerfish/hover/example/#">accumsan</A> 
eu, pulvinar et, volutpat vel, elit. Curabitur nec dui sed nunc congue tempus. 
Nulla ac dui ac libero fringilla nonummy. Maecenas ullamcorper sodales risus. 
Vivamus pretium dolor. Proin eu turpis. Phasellus ut mauris non nulla mattis 
luctus. <A 
href="http://www.htmldog.com/articles/suckerfish/hover/example/#">Nunc 
porttitor</A> dapibus sapien. In malesuada fermentum metus. Nulla egestas, <A 
href="http://www.htmldog.com/articles/suckerfish/hover/example/#">tellus</A> a 
vestibulum pharetra, nunc purus auctor lacus, ut semper purus ipsum eu velit. 
Praesent dui. Nulla accumsan turpis at erat.</P>
<P>Lorem ipsum <A 
href="http://www.htmldog.com/articles/suckerfish/hover/example/#">dolor</A> sit 
amet, consectetuer adipiscing elit. <A 
href="http://www.htmldog.com/articles/suckerfish/hover/example/#">Suspendisse</A> 
egestas ultricies pede. Phasellus suscipit blandit risus. <A 
href="http://www.htmldog.com/articles/suckerfish/hover/example/#">Praesent</A> 
nonummy. <A href="http://www.htmldog.com/articles/suckerfish/hover/example/#">In 
erat</A>. Duis nibh pede, <A 
href="http://www.htmldog.com/articles/suckerfish/hover/example/#">accumsan</A> 
eu, pulvinar et, volutpat vel, elit. Curabitur nec dui sed nunc congue tempus. 
Nulla ac dui ac libero fringilla nonummy. Maecenas ullamcorper sodales risus. 
Vivamus pretium dolor. Proin eu turpis. Phasellus ut mauris non nulla mattis 
luctus. <A 
href="http://www.htmldog.com/articles/suckerfish/hover/example/#">Nunc 
porttitor</A> dapibus sapien. In malesuada fermentum metus. Nulla egestas, <A 
href="http://www.htmldog.com/articles/suckerfish/hover/example/#">tellus</A> a 
vestibulum pharetra, nunc purus auctor lacus, ut semper purus ipsum eu velit. 
Praesent dui. Nulla accumsan turpis at erat.</P>
<P>Lorem ipsum <A 
href="http://www.htmldog.com/articles/suckerfish/hover/example/#">dolor</A> sit 
amet, consectetuer adipiscing elit. <A 
href="http://www.htmldog.com/articles/suckerfish/hover/example/#">Suspendisse</A> 
egestas ultricies pede. Phasellus suscipit blandit risus. <A 
href="http://www.htmldog.com/articles/suckerfish/hover/example/#">Praesent</A> 
nonummy. <A href="http://www.htmldog.com/articles/suckerfish/hover/example/#">In 
erat</A>. Duis nibh pede, <A 
href="http://www.htmldog.com/articles/suckerfish/hover/example/#">accumsan</A> 
eu, pulvinar et, volutpat vel, elit. Curabitur nec dui sed nunc congue tempus. 
Nulla ac dui ac libero fringilla nonummy. Maecenas ullamcorper sodales risus. 
Vivamus pretium dolor. Proin eu turpis. Phasellus ut mauris non nulla mattis 
luctus. <A 
href="http://www.htmldog.com/articles/suckerfish/hover/example/#">Nunc 
porttitor</A> dapibus sapien. In malesuada fermentum metus. Nulla egestas, <A 
href="http://www.htmldog.com/articles/suckerfish/hover/example/#">tellus</A> a 
vestibulum pharetra, nunc purus auctor lacus, ut semper purus ipsum eu velit. 
Praesent dui. Nulla accumsan turpis at erat.</P></BODY></HTML>

qui invece ho cercato di riadattare il codice sopra incollato sulle option con i risultati nulli

Codice:

<HTML xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><HEAD>
<META http-equiv=Content-Type content="text/html; charset=windows-1252">
<STYLE type=text/css media=all>
BODY {
	FONT: 100% arial, helvetica, sans-serif
}

OPTION:hover {
	COLOR: green;
	FONT-SIZE: 2.5em

}

</style>
<SCRIPT language= "Javascript" type="text/javascript"><!--//--><![CDATA[//><!--
function rollON(value){
	alert(value.className);
}

function rollOFF(value){
	alert(value.className);
}

sfHover = function() {
	var sfEls = document.getElementsByTagName("option");
	alert("Numero option trovate = "sfEls.length);
	
	for (var i=0; i<sfEls.length; i++) {
			sfEls[i].onmouseover = rollON(sfEls[i]);
			sfEls[i].onmouseout=sfEls[i].onmouseout = rollON(sfEls[i]);
		}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);

//--><!]]></SCRIPT>

<META content="MSHTML 6.00.2900.2873" name=GENERATOR></HEAD>
<BODY>
<select size="3" id="nav" multiple>
				<option value="0" >Primo</option>
				<option value="1" >Secondo</option>
				<option value="2" >Terzo</option>
			</select>
	</body>
</html>

quello che mi chiedo perchè al passagio del mouse sulle option non viene scatenata nessun'action ?

Un grazie anticipato

cionci · 15-04-2008, 23:07

Thread chiuso
|
V

15-04-2008, 23:07	#2
cionci Senior Member Iscritto dal: Apr 2000 Città: Vicino a Montecatini(Pistoia) Moto:Kawasaki Ninja ZX-9R Scudetti: 29 Messaggi: 53971	Thread chiuso \| V

Strumenti
Mostra una versione stampabile Invia questa pagina per email