[CSS] Problema "visibility"...

Ciao a tutti, ho un piccolo problemino con i CSS..
allora io voglio fare questo: ho un menù, in questo menù la pagina corrente ha un ">" accanto..ora invece le altre no! Quando si ci passa con il mouse voglio che compaiano...ex:
==========a==========
> Tutorial (---> Pagina corrente)
Contatti (Il ">" è nascosto dal CSS)
Altro (Il ">" è nascosto dal CSS)
Ecc (Il ">" è nascosto dal CSS)
==========a:hover==========
> Tutorial (---> Pagina corrente)
> Contatti (---> Ci sto passando con il mouse)
Altro (Il ">" è nascosto dal CSS)
Ecc (Il ">" è nascosto dal CSS)
....capito? Ecco quello che ho fatto io:
pagina.html

        <h2>HomePage</h2>
        <ul class="menublock">
            <li><a href="#">&raquo; Last News</a></li>
            <li><a href="#"><span class="raquo">&raquo;</span> News Archive</a></li>
        </ul> 

file.css

.raquo a  {visibility: hidden;}
.raquo a:hover {visibility: visible;} 

Grazie 1000...ciao Davide! ^^

[programmazioned]

E quindi?
Qual'è il problema/domanda?

Ciao!

Ah...il problema e che si vede...invece non si dovrebbe vedere quando NON ci passo con il mouse...
Grazie e Ciao! ^^

[programmazioned]

Perchè tu agisci sui tag "a" che stanno dentro gli span che appartengono alla classe "raquo", ovvero nessuno :S

.raquo{visibility: hidden;}
.raquo:hover{visibility: visible;}

Ma comunque oltre a non funzionare con IE6 (dove :hover si applica solo ad a) non avrebbe senso, visto che il ">" apparirebbe al passaggio sullo span che lo contiene (e che intanto sarebbe diventato invisibile) -.-

Dovresti usare JavaScript piuttosto che i css.

Ciao!

Ma non si vede!..ossia è scomparso se non ci passo ma quando ci passo non si vede..dopo quale soluzione avresti con js? Io ho usato il css x semplificare le kose..
Ciao! ^^

[programmazioned]

Ovvio che non è visibile...l'hai nascosto!

Comunque, innanzitutto ti serve che di default i >> siano nascosti.

Per cui nel css definisci la classe raquo impostando visibility a hidden:

.raquo{visibility:hidden}

Per lo Javascript:

Nell'html definisco la funziona da chiamare quando passo con il mouse (onmouseover) sui link, e quando li lascio (onmouseout):

<li><a href="#" onmouseover="mostra(this)" 
onmouseout="nascondi(this)"><span 
class="raquo">&raquo; </span>News 
Archive</a></li>

Nel caso sopra quando passo con il mouse sopra i collegamenti esegue la funzione js mostra().
Quando abbandono il link, nascondi().
In entrambi i casi passo come argomento il tag "a" di chiamata, in modo di poterne poi prendere lo span che si trova all'interno senza conoscere id, nome o altri dati.

function mostra(el){
var arrspan = el.getElementsByTagName('span');
for(var i = 0;i < arrspan.length; i++)
if(arrspan[i].className=='raquo')
arrspan[i].style.visibility='visible';
}

function nascondi(el){
var arrspan = el.getElementsByTagName('span');
for(var i = 0;i < arrspan.length; i++)
if(arrspan[i].className=='raquo')
arrspan[i].style.visibility='hidden';
}

Nello script sopra per tutti gli span che si trovano dentro il tag a passato come argomento verifico che la classe sia raquo, se è così imposto la proprietà visibility come mi serve.


Ciao!

Grazie 1000 probid..funziona!
Ciao! ^^

[dreadnaut]

in realta' il javascript non era necessario, nemmeno per IE6: bastava invertire l'ordine nelle regole:

A .raquo { visibility: hidden; }
A:hover .raquo { visibility: visible; }