[HTML] Div visibile o nascosto al passaggio del mouse

samurai.sette

Utente Attivo
17 Dic 2015
234
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
205
32
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 6
G Codice html Javascript 1
M Collegamento tra form html e script php PHP 4
L Ricezione dei dati su file php da modulo html PHP 6
F Creare elementi html con javascript Javascript 2
G Appicazione HTML per inserimento dai in Database Access Microsoft HTML e CSS 0
W visualizzare solo file html e sottocartelle di una cartella PHP 1
C Dopo chiusura del tag php la stringa html va a capo PHP 1
G img html HTML e CSS 3
M Come fare un countdown in HTML? HTML e CSS 4
D Stampa a video in altra pagina html Database 3
F Tv in html Offerte e Richieste di Lavoro e/o Collaborazione 1
N Script elenco file HTML HTML e CSS 5
L salvare codice html in mysql PHP 3
Cosina htaccess redirect 301 senza estensione html Web Server 6

Discussioni simili