Far apparire testo sopra un link con mouse hover non funziona

[Luca_pluatrco]

Ciao,

utilizzo la tecnica <ul> e[*] per disporre orizzontalmente una serie di link ognuno dei quali fa riferimento ad un'immagine tramite la tecnica "sprite". Al mouse over, uno span (normalmente invisibile) deve essere reso visibile sopra la relativa immagine/link sulla quale è il mouse.

Tuttavia la regola :hover applicata allo span non viene applicata.Sapreste indicarmi come fare?

In allegato l'effetto che vorrei ottenere.Grazie

<div class="">
<ul>
    <li class="page-home">
        <a href="/home/">
            <span>Home</span>
        </a>
    
    <li class="page-my-credit">
        <a href="/my-credit/">
            <span>My credit</span>
        </a>
    
    <li class="page-resources">
        <a href="/resources/">
            <span>Resources</span>
        </a>
    
    <li class="page-mail">
        <a href="/mail/">
            <span>Mail</span>
        </a>
    
    <li class="page-ventures">
        <a href="/ventures/">
            <span>Ventures</span>
        </a>
    

       ...
[/list]
</div>

.HeaderLinksWrapper ul
{
	display:inline;
	float:left;
	margin-top:55px;
	width:430px;			
}


.HeaderLinksWrapper ul 
{
	list-style-image:none;
	list-style-position:outside;
	list-style-type:none;
}

.HeaderLinksWrapper ul li
{
        /*nav-icons è un'unica immagine con tutte le icone*/
	background:url(images/Backgrounds/nav-icons.png) no-repeat left top;
	float:left;
	height:25px;
	margin-right:8px;
	width:25px;	
}

.HeaderLinksWrapper ul li.page-home
{
	background-position:0 0;
}

.HeaderLinksWrapper ul li a 
{
	float:left;
	height:25px;
	width:25px;
}

.HeaderLinksWrapper
{
	float:left;
	margin-left:145px;
}

.HeaderLinksWrapper  ul li a span {
background:Transparent url(images/Backgrounds/nav-active.png) no-repeat center bottom;
visibility:hidden;
padding-bottom:8px;
position:relative;
text-align:center;
text-transform:lowercase;
top:-25px;
}

/*Non riesco a rendere visibile lo span al mouse hover*/
.HeaderLinksWrapper a span:hover
{
	visibility:visible;
}

[Mich_]

Prova con questo selettore:

.HeaderLinksWrapper a:hover span { ... }

[Luca_pluatrco]

Grazie Mich, in effetti così riesco a visualizzare gli span.

O tuttavia il problema è che se il testo nello span non sempre viene posizionato in modo corretto sopra la relativa immagine, ad esempio "My Desk" viene visualizzato con "Desk" sotto la parola "My", penso per via dello spazio che fa andare a capo.

Probabilmente il problema risiede nel fatto che gli span sono dentro elementi <a> con dimensione fissa (25px). Come potrei fare per avere il testo di ogni <span> correttamente visualizzato sopra il relativo <a> che lo contiene?

Grazie di nuovo!

[Mich_]

Se una cosa non ci sta, avrai sempre un brutto effetto.

Se vuoi forzare le scritte a non andare a capo, basta che usi i non-breaking-space al posto degli spazi:
My&amp;nbsp;Desk

Comunque se va a capo e` perche` non ci sta in orizzontale. Pertanto devi definire anche l'attributo overflow al blocco contenitore (nel tuo caso il tag <a>, che hai reso blocco mediante il float). Probabilmetne il valore che interessa a te e` il visible, purche` il primo elemento nella lista abbia sempre un testo molto corto (il tuo "Home" probabilmente va bene).
Poi probabilmente vorrai definire il text-align:center; al blocco <a> (che viene poi ereditato anche dallo <span>).

[Luca_pluatrco]

Le regole:

overflow:visible;  text-align:center;

Sono gia presenti. Ho risolto il problema di avere le parole su due righe con tuttavia le parole non vengono corretamente centrate poichè, essendo piu' lunghe del contenitore, iniziano al lato sinistro del <a> padre (di fatto appaiono decentrate a sinistra).

Per risolvere ciò l'unico modo è usare posizionamento assoluto? Pero' se un domani cambio qualcosa nelle parole o aggiungo/tolgo un elemento il posizinamento è tutto da rifare...

Nella foto in allegato si vede il problema: la "m" di my credit viene allineata al margine sinistro dell'<a> (immagine dollaro) invece che essere centrata.

Grazie per ogni consiglio

[Mich_]

Ho gia` scritto che secondo me il text-align: center va messo nel tag <a> (e a quel punto puoi toglierlo dallo span, dato che tale attributo viene ereditato).

[Luca_pluatrco]

Ho anche spostato text-align:center, attrbuendolo solo al <a> padre, ma il risultato non cambia.
Il testo infatti, benchè centrato, inizia sempre dal margine sinistro dell' <a> per via delle sue dimensioni.

Penso davvero che allora la soluzione sia possibile solo con posizionamento assoluto...