[HTML] Div visibile o nascosto al passaggio del mouse

Discussione in 'HTML e CSS' iniziata da samurai.sette, 14 Dicembre 2017.

  1. samurai.sette

    samurai.sette Utente Attivo

    Registrato:
    17 Dicembre 2015
    Messaggi:
    189
    Mi Piace Ricevuti:
    5
    Punteggio:
    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.
     
  2. WmbertSea

    WmbertSea Utente Attivo

    Registrato:
    28 Novembre 2014
    Messaggi:
    146
    Mi Piace Ricevuti:
    20
    Punteggio:
    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>
     
  3. Max 1

    Max 1 Super Moderatore Membro dello Staff SUPER MOD MOD

    Registrato:
    29 Febbraio 2012
    Messaggi:
    3.770
    Mi Piace Ricevuti:
    283
    Punteggio:
    83
    Sesso:
    Maschio
  4. samurai.sette

    samurai.sette Utente Attivo

    Registrato:
    17 Dicembre 2015
    Messaggi:
    189
    Mi Piace Ricevuti:
    5
    Punteggio:
    18
    Ciao, grazie a tutti. Mi avete dato ottimi consigli. :). Ciao!!!
     
Sto caricando...

Condividi questa Pagina