[HTML] Div visibile o nascosto al passaggio del mouse

[samurai.sette]

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

#corpo {
    visibility:hidden;
    }
#corpo:hover {
    visibility:visible;
    }

Javascript

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

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

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

#contenitore #corpo {
   visibility: hidden;
}
#contenitore:hover #corpo {
   visibility: visible;
}

mentre l'html avrà una struttura di questo tipo:

<div id="contenitore">
   <div id="corpo">
      ...
   </div>
</div>

 

[Max 1]

https://stackoverflow.com/questions/2707100/how-to-show-hidden-divs-on-mouseover

 

[samurai.sette]

Ciao, grazie a tutti. Mi avete dato ottimi consigli. . Ciao!!!