[HTML] Div visibile o nascosto al passaggio del mouse

samurai.sette

Utente Attivo
17 Dic 2015
235
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

Moderatore
Membro dello Staff
MOD
28 Nov 2014
432
73
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>
 
Discussioni simili
Autore Titolo Forum Risposte Data
A inserire variabile php colore in div html PHP 2
G Aiuto HTML, collegamento con un bottone a una <div> di un' altra pagna HTML e CSS 5
ANDREA20 [HTML] problema con i div HTML e CSS 10
Giacomo Boccherini [HTML] il div non si ottimizza HTML e CSS 1
E [HTML] Allineare foto a un tag DIV verticalmente HTML e CSS 0
E [HTML] Allineamento immagine agli angoli inferiori di un div HTML e CSS 12
Andrea_Ventura [HTML] Creare un DIV con slideshow HTML e CSS 5
M [HTML] Invertire DIV su dispositivi mobile HTML e CSS 2
I [HTML] Slideshow si sovrappone a <div> HTML e CSS 14
S [HTML] Centrare verticalmente il testo in div HTML e CSS 2
G [HTML] Modificare ordine dei div in mobile responsive HTML e CSS 5
D [HTML] Frameset e Div HTML e CSS 8
G [HTML] Impostare dimensione immagini in un div HTML e CSS 2
S [HTML] Distanza esatta tra due div HTML e CSS 7
G [HTML] Posizionamento testo in un div HTML e CSS 5
G [HTML] Bordo bianco sotto immagine in un Div HTML e CSS 1
F [HTML] pagina non scorre e div sotto l'altezza del browser non si vedono HTML e CSS 3
M [HTML] Inserire un div tra altri div già esistenti HTML e CSS 7
giannit [HTML] Mettere div al posto di iframe e possibile? HTML e CSS 9
M [HTML] DIV all'interno di un altro DIV HTML e CSS 3
A [HTML] div flessibile con span HTML e CSS 14
F [HTML] Div in scroll insieme alla pagina HTML e CSS 0
S [HTML] Effetto hover in un div HTML e CSS 6
zorro [HTML] 'bucare ' un div HTML e CSS 10
P [HTML] Sfondo colorato di un div contenitore di altri due div HTML e CSS 9
S [HTML] spostare div se quello adiacente è vuoto HTML e CSS 6
D [HTML] Problema con Dreamweaver; 1) tabella con larghezza 100% 2) Immagine che si adatta a Div HTML e CSS 28
A [WordPress] [HTML] Link in div con z-index inferiore WordPress 1
F [HTML] Centratura Div HTML e CSS 3
F [HTML] Scalare un div ma non il suo contenuto HTML e CSS 1
F [HTML] Inserire testo all'interno di una div con border radius HTML e CSS 2
felino Shortcode e HTML Div WordPress 3
felino [HTML] DIV menu fisso durante lo scroll HTML e CSS 5
P caricare dati all'interno di un tag div html HTML e CSS 15
C in un file html/javascript caricare i div presenti nel body in un file di testo e richiamarli Javascript 7
N [PHP+HTML+CSS] Problema con un div HTML e CSS 4
G Pagina html in stringa PHP 2
E Sostituzione Elemento Html PHP 3
G Elementi HTML HTML e CSS 1
K Visualizzare del html responsive in una Webview Sviluppo app per Android 0
T Domanda valutazione html LinkedIn 2022 pt3 HTML e CSS 7
T Domanda valutazione html LinkedIn 2023 pt2 HTML e CSS 15
T Domanda valutazione html LinkedIn 2023 pt1 HTML e CSS 1
MarcoGrazia Salvataggio HTML in database PHP 2
K posizionare variabile da pagina html all'iframe. Javascript 1
peppe0703 Come Estrarre dati da db wordpress e richiamarli in html esterno HTML e CSS 0
L problema collegamento file css con html HTML e CSS 1
D Informazioni da XAMPP su HTML PHP 0
R Immagini html HTML e CSS 2
K File audio in html, chi mi può aiutare? HTML e CSS 0

Discussioni simili