[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:

Codice HTML:

---

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

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

---

Codice HTML:

---

<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! ^-^

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

Codice:

---

.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! =(

Codice HTML:

---

<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! ^.^

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?

Codice PHP:

---

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


---

Non ho ben capito!! Grazie mille!!

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! =(

Ecco il CSS

Codice HTML:

---

<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:

Codice 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!!

Citazione:

---

Originalmente inviato da sIM

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

Citazione:

---

Originalmente inviato da sIM

- 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.

Citazione:

---

Originalmente inviato da sIM

- 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! ^.^

È 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ò?

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:

Codice PHP:

---

.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

Codice PHP:

---

<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! :lol:

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

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