[CSS] Mostrare div con a:hover

Ciao a tutti, sto provando a mostrare un div con a:hover.
Ma quest'ultima non funziona! =(
I div sono più di uno... ad ogni div è associato un id (#nome) con la classe nel link (.nome)
Quindi #nome è il div e .nome è il collegamento per mostrarlo (un'immagine).
Ecco il codice:

#facebook, #twitter, #wlm { display: none;  }

.facebook:hover > #facebook { display: inline; }
.twitter:hover > #twitter { display: inline; }
.wlm:hover > #wlm { display: block; }

<div id="servizi">
<a href="#" class="facebook"><img src="http://forum.it.altervista.org/images/facebook.png" alt="" /></a> 
<a href="#" class="twitter"><img src="http://forum.it.altervista.org/images/twitter.png" alt="" /></a> 
<a href="#" class="wlm"><img src="http://forum.it.altervista.org/images/wlm.png" alt="" /></a>
</div>

<div id="facebook">#div Facebook</div>
<div id="twitter">#div Twitter</div>
<div id="wlm">#div Windows Live Messenger</div>

Purtroppo non funziona! Non viene mostrato il div quando si passa con i mouse sull'icona del servizio! Dove sta il problema?
Grazie mille! ^-^

[karl94]

Non si può fare con i CSS, a meno che non cambi la struttura della pagina HTML. Il tuo errore sta nel selettore CSS:

.facebook:hover > #facebook

Il selettore che hai usato tu identifica l'elemento con ID "facebook", figlio (non un discendente generico) dell'elemento con classe "facebook" mentre il cursore del mouse vi è sopra.

E quindi come potrei ottenere quello che voglio? xD
Edit: ho provato così ma non funziona! =(

<script type="text/javascript">
	function sh(div) {
		if(div.style.display == "none") { div.style.display = ""; }
		else { div.style.display = "none"; }
	}
/*
onMouseOut="wlm.style.display='none';"
onMouseOver="wlm.style.display='inline';"
*/
</script>

<div id="servizi">
<a href="#" onMouseOut="sh(facebook);" onMouseOver="sh(facebook);"><img src="images/facebook.png" alt="" /></a> 
<a href="#" onMouseOut="sh(twitter);" onMouseOver="sh(wlm);"><img src="images/twitter.png" alt="" /></a> 
<a href="#" onMouseOut="sh(wlm);" onMouseOver="sh(wlm);"><img src="images/wlm.png" alt="" /></a>
</div>

Con il javascript diretto funziona (anche se la posizione del div è "sballata" sembra essere con un float) ma con la funzione no.
Non c'è una via più semplice? Grazie mille! ^.^

[karl94]

Potresti:

• Usare javascript
• Modificare la struttura della pagina, mettendo gli elementi fratelli, o mettendo il div figlio o discendente di a, in modo da poter usare i selettori CSS

N.b.: con la seconda alternativa potresti incontrare problemi con browser vecchi (IE6)

Ehm... in pratica come dovrei fare con css?? Non ho la più pallida idea! >.<"
Io vorrei quella disposizione nel codice sorgente... come dovrebbe essere secondo il tuo consiglio?

body #wlm > a.wlm:hover { display: inline? 

Non ho ben capito!! Grazie mille!!

[karl94]

Con i CSS devi per forza spostare gli elementi, se vuoi una mano, devi prima postare l'intero codice della pagina, altrimenti non posso aiutarti.

Il codice è quello postato nel primo post... Grazie! xD
Comunque vorrei sapere come mai la funzione creata da me non funge! =(

[karl94]

Ecco il CSS

<style type="text/css">
	#facebook, #twitter, #wlm{
		display: none;
	}
	
	.facebook:hover~#facebook, .twitter:hover~#twitter, .wlm:hover~#wlm{
		display: block;
	}
</style>

Ed ecco l'HTML:

<a href="#facebook" class="facebook"><img src="http://forum.it.altervista.org/images/facebook.png" alt="" /></a> 
<a href="#twitter" class="twitter"><img src="http://forum.it.altervista.org/images/twitter.png" alt="" /></a> 
<a href="#wlm" class="wlm"><img src="http://forum.it.altervista.org/images/wlm.png" alt="" /></a>

<div id="facebook">#div Facebook</div>
<div id="twitter">#div Twitter</div>
<div id="wlm">#div Windows Live Messenger</div>

N.b.: affinché il tutto funzioni tutti i 3 div e gli a devono essere fratelli.

Si ok funziona però ho alcune domande:
- Non ho mai visto ~ in un file CSS. A cosa serve?
- Come posso evitare di mettere tutto dentro il div #servizi? Non può dipendere dal body?
- Il div che viene mostrato si visualizza accanto le icone (a destra) è come se ci fosse un float. Com'è possibile? Risolto: sostituire con inherit! =D
Grazie mille per il tuo aiuto!!

[karl94]

Si ok funziona però ho alcune domande:
- Non ho mai visto ~ in un file CSS. A cosa serve?

È un combinatore, permette di selezionare un elemento fratello di un altro. http://www.w3.org/TR/css3-selectors/...ng-combinators

- Come posso evitare di mettere tutto dentro il div #servizi? Non può dipendere dal body?

Non ho capito, vuoi metterli dentro un div o lasciali nel body? In ogni caso non ci sono problemi.

- Il div che viene mostrato si visualizza accanto le icone (a destra) è come se ci fosse un float. Com'è possibile? Risolto: sostituire con inherit!

Con il codice che ho postato io non accadeva, che codice stavi usando?

Per la prima risposta... Grazie! ^^
Per la seconda... se io metto i div (quelli della descrizione per intenderci) fuori dal div #servizi questo codice da te postato non funziona più! =(
Come mai? Per adesso funzionano perché sono dentro il div servizi ma io voglio separarli.
I div con la descrizione devono essere fuori dal div servizi.
Grazie mille! ^.^

[karl94]

È proprio per questo che ti ho detto che per farlo con i CSS dovevi modificare la struttura della pagina. Il problema è che i CSS non permettono di selezionare il padre di un altro elemento (come servirebbe in questo caso), però permettono di selezionare un elemento fratello di un altro. Se tu metti i tre a dentro un div#servizi, allora gli elementi a e div#facebook(, div#twitter etc.) non saranno più fratelli, quindi non saranno più identificati dal combinatore ~.

Capito però non può essere il collegamento dentro il div servizi fratello (perché è nel body) dei div con la descrizione (twitter,facebook,wlm)?
Cioè non esiste una via per aggirare tutto ciò?

[karl94]

No, mi dispiace, servirebbe un selettore che permetta di selezionare il padre di un elemento (in questo caso il padre di a:hover), l'unica altra soluzione è javascript.

Allora ho provato a rimuovere il div servizi (per stilizzare il codice) e ho messo questo css:

.facebook, .twitter, .wlm { text-align: center; }
.facebook a, .twitter a, .wlm a { margin: 0 10px; }
.facebook a img, .twitter a img, .wlm a img { padding: 10px; border: 0; }
.facebook a:hover, .twitter a:hover, .wlm a:hover { cursor: help; }
.facebook a:hover img, .twitter a:hover img, .wlm a:hover img { background: #ddd; -moz-border-radius: 5px; } 

Risultato? Non funziona... why? O.O

<a href="#" class="facebook"><img src="images/facebook.png" alt="" /></a> 
<a href="#" class="twitter"><img src="images/twitter.png" alt="" /></a> 
<a href="#" class="wlm"><img src="images/wlm.png" alt="" /></a> 

Però la parentela funziona!

[karl94]

Puoi mettere il link? Così è più semplice.

E' in locale! .-.
Non tengo niente qui su AlterVista! ^.^
Comunque è quello il codice! =D