Come mostrare le immersioni nascoste al passaggio del mouse?

Come mostrare un set di onmouseover del div nascosto?Come mostrare le immersioni nascoste al passaggio del mouse?

Ad esempio:

<div id="div1">Div 1 Content</div> 
<div id="div2">Div 2 Content</div> 
<div id="div3">Div 3 Content</div>

Tutti i div del devono essere mostrati evento onmouseover.

fonte

2010-04-25 Jack P.

Si prega di fornire maggiori dettagli. Al passaggio del mouse di cosa? – SLaks

Cosa intendi con le immersioni nascoste? Intendi dire che la visibilità è impostata su "nascosto" o che la visualizzazione è impostata su "nessuno"? –

La domanda ha bisogno di miglioramenti, chiarimenti, maggiori dettagli. – Jaanus

Se i div sono nascosti, non attiveranno mai l'evento mouseover.

Dovrai ascoltare l'evento di qualche altro elemento non visibile.

È possibile considerare di avvolgere i div nascosti in contenitori div che rimangono visibili e quindi agire sull'evento mouseover di questi contenitori.

<div style="width: 80px; height: 20px; background-color: red;" 
     onmouseover="document.getElementById('div1').style.display = 'block';"> 
    <div id="div1" style="display: none;">Text</div> 
</div>

Si potrebbe anche ascoltare l'evento mouseout se si desidera che il div a scomparire quando il mouse lascia il div contenitore:

onmouseout="document.getElementById('div1').style.display = 'none';"

fonte

2010-04-25 04:03:24

Funziona anche per dispositivi touch, ad es. mobile? – kurdtpage

Opzione 1 Ogni div è specificamente individuati, in modo che qualsiasi altra div (senza gli ID specifici) sulla pagina non obbedirà alla pseudo-classe: hover.

<style type="text/css"> 
    #div1, #div2, #div3{ 
    display:none; 
    } 
    #div1:hover, #div2:hover, #div3:hover{ 
    display:block; 
    } 
</style>

Opzione 2 Tutti div sulla pagina, a prescindere di ID, hanno l'effetto hover.

<style type="text/css"> 
    div{ 
    display:none; 
    } 
    div:hover{ 
    display:block; 
    } 
</style>

fonte

2010-04-25 04:08:08

Il problema di questa soluzione è che non è possibile librarsi sopra un div che non viene visualizzata. –

Sì, il contrario sarebbe possibile, ma non così. –

quindi vorrei usare il visibility: hidden regola/visibile, invece. Buon punto –

Si potrebbe avvolgere il div nascosti in un altro div che si alternerà la visibilità con onMouseOver e onMouseOut gestori di eventi in JavaScript:

<style type="text/css"> 
    #div1, #div2, #div3 { 
    visibility: hidden; 
    } 
</style> 
<script> 
    function show(id) { 
    document.getElementById(id).style.visibility = "visible"; 
    } 
    function hide(id) { 
    document.getElementById(id).style.visibility = "hidden"; 
    } 
</script> 

<div onMouseOver="show('div1')" onMouseOut="hide('div1')"> 
    <div id="div1">Div 1 Content</div> 
</div> 
<div onMouseOver="show('div2')" onMouseOut="hide('div2')"> 
    <div id="div2">Div 2 Content</div> 
</div> 
<div onMouseOver="show('div3')" onMouseOut="hide('div3')"> 
    <div id="div3">Div 3 Content</div> 
</div>

fonte

2010-04-25 04:24:11

Passare il mouse sopra il contenitore e andare in bilico sul div I utilizzare questo per i menu a discesa jQuery principalmente:

copia l'intero documento e creare un file .html sarete in grado di capire da soli da questo!

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
      <html xmlns="http://www.w3.org/1999/xhtml"> 
      <head> 
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
      <title>The Divs Case</title> 
      <style type="text/css"> 
      * {margin:0px auto; 
      padding:0px;} 

      .container {width:800px; 
      height:600px; 
      background:#FFC; 
      border:solid #F3F3F3 1px;} 

      .div01 {float:right; 
      background:#000; 
      height:200px; 
      width:200px; 
      display:none;} 

      .div02 {float:right; 
      background:#FF0; 
      height:150px; 
      width:150px; 
      display:none;} 

      .div03 {float:right; 
      background:#FFF; 
      height:100px; 
      width:100px; 
      display:none;} 

      div.container:hover div.div01 {display:block;} 
      div.container div.div01:hover div.div02 {display:block;} 
      div.container div.div01 div.div02:hover div.div03 {display:block;} 

      </style> 
      </head> 
      <body> 

      <div class="container"> 
       <div class="div01"> 
       <div class="div02"> 
        <div class="div03"> 
        </div> 
       </div> 
       </div> 

      </div> 
      </body> 
      </html>

fonte

2010-04-25 10:03:30 Evilalan

C'è un modo molto semplice per farlo in un modo solo CSS.

Applicare un'opacità a 0, rendendo quindi invisibili, ma sarà ancora reagire a eventi JavaScript e selettori CSS. Nel selettore al passaggio del mouse, renderlo visibile cambiando il valore di opacità.

#mouse_over { 
 
    opacity: 0; 
 
} 
 

 
#mouse_over:hover { 
 
    opacity: 1; 
 
}

<div style='border: 5px solid black; width: 120px; font-family: sans-serif'> 
 
<div style='height: 20px; width: 120px; background-color: cyan;' id='mouse_over'>Now you see me</div> 
 
</div>

fonte

2014-12-22 22:01:41

wow è un ottimo consiglio grazie! è proprio quello che volevo, rendendolo invisibile ma innescando gli eventi – achecopar

Come mostrare le immersioni nascoste al passaggio del mouse?

risposta

Problemi correlati