[HTML] Div visibile o nascosto al passaggio del mouse

samurai.sette

Utente Attivo
17 Dic 2015
228
6
18
Ciao a tutti.
Come da titolo vorrei che un div diventasse visibile o meno al passaggio del mouse su di esso.
Ho provato sia con i CSS che con Javascript ma ho sempre lo stesso problema. Quando esco fuori dal div sparisce ma se provo a tornarci sopra non ricompare.:(
Questo è quello che ho provato a fare.
CSS
HTML:
#corpo {
    visibility:hidden;
    }
#corpo:hover {
    visibility:visible;
    }
Javascript
HTML:
<script>
    function mouse_dentro() {
        document.getElementById("corpo").style.visible = "visible";
        }
    function mouse_fuori() {
        document.getElementById("corpo").style.visible = "hidden";
        }
</script>
Qualcuno ha qualche consiglio da potermi dare?
Grazie mille, ciao.
 

WmbertSea

Utente Attivo
28 Nov 2014
178
27
28
Ciao, in linea di massima gli elementi nascosti con visibility:hidden perdono la sensibilità nel ricevere gli eventi del mouse.

Puoi comunque risolvere in vari modi usando del semplice css.

Al posto di visibility potresti usare la proprietà opacity con cui rendere l'elemento trasparente (ma non nascosto).
Codice:
#corpo {
   opacity: 0;
}
#corpo:hover {
   opacity: 1;
}
Un altro metodo è quello di usare, sì, visibility ma aggiungendo un ulteriore elemento come contenitore, in modo da "avvolgere" l'elemento da rendere nascosto e quindi "delegare" l'hover sull'elemento contenitore.

Il css sarà una cosa del genere:
Codice:
#contenitore #corpo {
   visibility: hidden;
}
#contenitore:hover #corpo {
   visibility: visible;
}
mentre l'html avrà una struttura di questo tipo:
Codice:
<div id="contenitore">
   <div id="corpo">
      ...
   </div>
</div>