Immagine diversa al rollover per ogni voce di menu

[moncicci]

Ciao a tutti! io ho questo menu nella pagina principale (in .php)

<div id="menu"> 	
<ul> 		[*]Home Page 		[*]About 		[*]Music 		[*]Photo 		[*]Contact								 [/list]</div>

e questo css:

#menu{ 	
margin:0 30px 10px 90px; 	 } 	
#menu ul{ 		list-style:none; 	} 		
#menu li{list-style:none;display:block;float:left;margin:0 3px; 			padding:4px;border:1px solid #ccc;background:#fff; 	} 			
#menu li a{ display:block; float:left; color:#fff; 				text-transform:uppercase; font-size:11px; 				font-weight:bold;background:#2f2f31; padding:15px 35px; 				text-decoration:none; 			} 				
#menu li a:hover{ 
display:block; float:left; background:#49740d url(../images/gradient1.jpg) no-repeat center top; text-decoration:none; 				} 			
#menu li a.current{ display:block; float:left; color:#fff;
text-transform:uppercase; font-size:11px; font-weight:bold; padding:15px 35px; 	background:#49740d url(../images/gradient1.jpg) no-repeat center top; 			text-decoration:none; 	}

La mia necessità è che, nella fase di rollover, sia visualizzata un'immagine diversa per ogni voce di menu (e che la scritta della voce scompaia se possibile).
Come dovrei modificare il css? Grazie mille!

[Prill]

Ciao se vuoi che ogni link allo stato hover abbia uno sfondo diverso dovresti nel css definire classi o id diversi per ciascun link, ad esempio

#menu li a.sfondo1 {proprietà}
#menu li a.sfondo1:hover {proprietà}

#menu li a.sfondo2 {proprietà}
#menu li a.sfondo2:hover {proprietà}

per nascondere il testo puoi agire in modi diversi, la prima cosa che mi viene in mente e di racchiuderlo in uno span e avere su questo un display:none oppure un'opacity eguale a zero allo stato hover del link

#menu li a:hover span {display:none}

per i link dovrai specificare le dimensioni

[moncicci]

Originariamente inviato da Prill
Ciao se vuoi che ogni link allo stato hover abbia uno sfondo diverso dovresti nel css definire classi o id diversi per ciascun link, ad esempio

#menu li a.sfondo1 {proprietà}
#menu li a.sfondo1:hover {proprietà}

#menu li a.sfondo2 {proprietà}
#menu li a.sfondo2:hover {proprietà}

per nascondere il testo puoi agire in modi diversi, la prima cosa che mi viene in mente e di racchiuderlo in uno span e avere su questo un display:none oppure un'opacity eguale a zero allo stato hover del link

#menu li a:hover span {display:none}

per i link dovrai specificare le dimensioni

Ciao, ho provato a fare come dici tu ma non ci sono riuscito
Ma le regole generali "li a" e "li a:hover" le devo eliminare e fare solo quelle nello specifico?
Potresti, tu o chi ne ha voglia, farmi un esempio sul mio listato per favore? basta anche solo una voce di menu, poi immagino che si replichino
Grazie

[Prill]

ok, facciamolo con opacity così non è necessario impostare le dimensioni delle tue voci elenco, nel css:

#menu li a{ 
display:block;
float:left;
color:#fff;
text-transform:uppercase;
font-size:11px;
font-weight:bold;
background-color:#2f2f31;
padding:15px 35px;
text-decoration:none;
}
				
#menu li a:hover{ 
background-color:#49740d;
} 

#menu li a:hover span {
opacity:0;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; /* per ie8 */
filter: alpha(opacity=0); /* per ie6 e 7 */
zoom:1; /* per ie, da spostare con i filtri precedenti preferibilmente in un css solo per explorer */
}
			
#menu li a.current{ 
background:#49740d url(../images/gradient1.jpg) no-repeat center top;
}
#menu li a#home { 
background-image:url(img1.jpg);
}
#menu li a#home:hover { 
background-image:url(img2.jpg);
}
#menu li a#about { 
background-image:url(img3.jpg);
}
#menu li a#about:hover { 
background-image:url(img4.jpg);
}

nel body

<ul> 		[*]<span>Home Page</span> 		[*]<span>About</span> 		  							 [/list]

[moncicci]

Originariamente inviato da Prill
ok, facciamolo con opacity così non è necessario impostare le dimensioni delle tue voci elenco, nel css:

#menu li a{ 
display:block;
float:left;
color:#fff;
text-transform:uppercase;
font-size:11px;
font-weight:bold;
background-color:#2f2f31;
padding:15px 35px;
text-decoration:none;
}
				
#menu li a:hover{ 
background-color:#49740d;
} 

#menu li a:hover span {
opacity:0;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; /* per ie8 */
filter: alpha(opacity=0); /* per ie6 e 7 */
zoom:1; /* per ie, da spostare con i filtri precedenti preferibilmente in un css solo per explorer */
}
			
#menu li a.current{ 
background:#49740d url(../images/gradient1.jpg) no-repeat center top;
}
#menu li a#home { 
background-image:url(img1.jpg);
}
#menu li a#home:hover { 
background-image:url(img2.jpg);
}
#menu li a#about { 
background-image:url(img3.jpg);
}
#menu li a#about:hover { 
background-image:url(img4.jpg);
}

nel body

<ul> 		[*]<span>Home Page</span> 		[*]<span>About</span> 		  							 [/list]

Ciao, intanto grazie per la risposta
Purtroppo ancora non funge, ma sicuramente sto sbagliando qualcosa io.
Quando ora passo il mouse sopra la voce di menu, sparisce la scritta ma, invece di mostrarmi l'immagine impostata per ogni singola voce, mi mostra il colore impostato in "a:hover" (quello generale)...può darsi che sia un problema d'immagine? in base al css che ho impostato, quanto dovrebbero essere grandi? e, ultima cosa, la parte di codice che non hai riportato tu, la devo eliminare?*

*codice non riportato da te:

#menu{ 	margin:0 30px 10px 90px; 	 } 	#menu ul{ 		list-style:none; 	} 		#menu li{ 			list-style:none; 			display:block; 			float:left; 			margin:0 3px; 			padding:4px; 			border:1px solid #ccc; 			background:#fff; 		}

Abbi pazienza per favore, penso che ci siamo quasi alla soluzione

[Prill]

certo, devi lasciare nel css anche le altre regole, io ho riportato solo le parti modificate. Scrivendo il codice, lo vedo ora, ho messo uno spazio di troppo in a#about :hover che va scritto a#about:hover (nome id, due punti e hover tutto attaccato, come era per il link precedente)

[moncicci]

Originariamente inviato da Prill
certo, devi lasciare nel css anche le altre regole, io ho riportato solo le parti modificate. Scrivendo il codice, lo vedo ora, ho messo uno spazio di troppo in a#about :hover che va scritto a#about:hover (nome id, due punti e hover tutto attaccato, come era per il link precedente)

Scusami se ti rispondo solo ora ma ero fuori per lavoro Funziona tutto! ti ringrazio veramente tanto! alla prox!