[ul li] cambia immagine elenco

[max103]

devo fare in modo che a:hover cambi colore e immagine del link, ho fatto così ma non funziona, cambia solo il colore e no immagine:


per il link:

<div id="cliccaqui">
			<ul>
				[*]clicca qui
			[/list]
</div>

CSS

#cliccaqui li {
	font-size: 16px;
	font-weight: bold;
	line-height:20px;
	text-decoration: none;
	color: #003399;
	list-style-image: url(../img/pallo.gif);
	list-style-type: none;
}
#cliccaqui li a:hover {
	font-size: 16px;
	font-weight: bold;
	line-height:20px;
	text-decoration: none;
	color: #990000;
	list-style-image: url(../img/pallor.gif);
	list-style-type: none;
}

[fcaldera]

usi list-style-image dentro #cliccaqui li a:hover (ovvero un link invece di un li) e ciò è errato
usa invece background-image

[max103]

devo cambiare img con a:hover
se utilizzo background mi ricopre il link di pallini

ti allego una immagine del link

[fcaldera]

Originariamente inviato da max103
se utilizzo background mi ricopre il link di pallini

background: url('../img/pallor.gif') top left no-repeat;

[max103]

aaaaaaaa c'è il trucco

ok ora funge, anche se per posizionarlo correttamente gli devo dare:

background: url(../img/pallo.gif) no-repeat 90px top;

perchè clicca qui si trova centrato in orizzontale in un div.

voglio dire: se un utente visualizza in modo leggermente diverso, la scritta e il pallo rischiano di sovrapporsi.

ecco perché avevo utilizzato l'immagine del puntoelenco.

Non c'è una soluzione più "elastica ai cambiamenti"?

[max103]

no, ho parlato troppo presto

il pallo compare correttamente nello stato mouse out;
nello stato mause over non cambia, praticamente rimane dello stesso colore


ti allego html e css di come è ora:

				<div id="cliccaqui">
					<ul>
						[*]clicca qui
					[/list]
				</div>

css

#cliccaqui{
	text-align:center;
	background-color:#DEDEFF;
}
#cliccaqui li {
	font-size: 16px;
	font-weight: bold;
	line-height:20px;
	text-decoration: none;
	color: #003399;
	background: url(../img/pallo.gif) no-repeat 90px top;
	list-style-type: none;
}
#cliccaqui li a:hover {
	font-size: 16px;
	font-weight: bold;
	line-height:20px;
	text-decoration: none;
	color: #990000;
	background: url(../img/pallor.gif) no-repeat 90px top;
	list-style-type: none;
}

[fcaldera]

css

#cliccaqui{
	text-align:center;
	background-color:#DEDEFF;
}

#cliccaqui li {
list-style-type: none;
}

#cliccaqui li a {
	font-size: 16px;
	font-weight: bold;
	line-height:20px;
	text-decoration: none;
	color: #003399;
	background: url(../img/pallo.gif) no-repeat 90px top;
}
#cliccaqui li a:hover {
	color: #990000;
	background: url(../img/pallor.gif) no-repeat 90px top;
}

[max103]

niente, non va :master:
se metto background-image su #cliccaqui li lo vedo correttamente, se lo metto su #cliccaqui li a scompare, forse c'e' un problema strutturale nell'html?

#cliccaqui{
text-align:center;
background-color:#DEDEFF;
}

#cliccaqui li {
list-style-type: none;
background-image: url(../img/pallo.gif);
}

#cliccaqui li a {
font-size: 16px;
font-weight: bold;
line-height:20px;
text-decoration: none;
color: #003399;
background-image: url(../img/pallo.gif);
}
#cliccaqui li a:hover {
color: #990000;
background-image: url(../img/pallor.gif);
}

[max103]

credo di aver capito:

l'immagine di sottofondo è riferita al "li" per cui finito il testo, finisce l'area del "li" e finisce anche l'immagine di sfondo, ti allego una immagine con spostamento -10px...

[max103]

ho risolto cosi' ma vi prego, ditemi che c'e' un altra soluzione questa mi fa schifo:

				<div id="cliccaqui">
					<ul>
						[*]& nbsp;& nbsp;& nbsp;& nbsp;clicca qui
					[/list]
				</div>