¿Cómo mostrar divs ocultos en mouseover?

¿Cómo mostrar un conjunto de div ocultos onmouseover?¿Cómo mostrar divs ocultos en mouseover?

Por ejemplo:

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

Todos div del necesitan ser mostrados evento onmouseover.

Fuente

2010-04-25 Jack P.

Sírvanse proporcionar más detalles. ¿En mouseover de qué? – SLaks

¿Qué quiere decir con divs ocultos? ¿Quiere decir que la visibilidad está configurada como "oculta" o que la pantalla está configurada como "ninguna"? –

Pregunta necesita mejora, aclaración, más detalles. – Jaanus

Si los divs están ocultos, nunca desencadenarán el evento mouseover.

Tendrá que escuchar el evento de algún otro elemento no oculto.

Puede considerar envolver sus divisiones ocultas en divisiones de contenedor que permanecen visibles, y luego actuar en el evento mouseover de estos contenedores.

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

También puede detectar el evento mouseout si desea que el div a desaparecer cuando el ratón sale del contenedor div:

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

Fuente

2010-04-25 04:03:24

¿Esto también funciona para dispositivos táctiles, p. ¿móvil? – kurdtpage

Opción 1 Cada div se identifica específicamente, por lo que cualquier otra div (sin los ID específicos) en la página no obedecerá a la: pseudoclave de flotación.

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

Opción 2 Todos los divs en la página, independientemente de las identificaciones, tienen el efecto de la libración.

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

Fuente

2010-04-25 04:08:08

El problema con esta solución es que no es posible desplazarse sobre un div que no se muestra. –

Sí, lo contrario sería posible, pero no así. –

Entonces usaría la visibilidad: regla oculta/visible en su lugar. Buen punto. –

Usted puede envolver el div oculto en otro div que cambiar la visibilidad con onMouseOver y onMouseOut controladores de eventos en 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>

Fuente

2010-04-25 04:24:11

Pasar el ratón sobre el recipiente y van flotando en el divs I Úselo para menús JQuery DropDown principalmente:

Copie todo el documento y cree un archivo .html que podrá deducir por su cuenta.

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

Fuente

2010-04-25 10:03:30 Evilalan

Hay una manera muy simple de hacerlo de forma única CSS.

Aplica una opacidad a 0, por lo que es invisible, pero seguirá reaccionando a los eventos de JavaScript y a los selectores de CSS. En el selector de desplazamiento, hágalo visible cambiando el valor de opacidad.

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

Fuente

2014-12-22 22:01:41

wow eso es un gran consejo, gracias! eso es justo lo que quería, lo que lo hace invisible pero desencadena los eventos – achecopar

¿Cómo mostrar divs ocultos en mouseover?

Respuesta

Cuestiones relacionadas