¿Cómo mostrar divs ocultos al pasar el mouse por encima?

Solución:

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

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

Puede considerar envolver sus divs ocultos en divs de contenedor que permanecen visibles y luego actuar en el mouseover caso 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 escuchar el mouseout event si desea que el div desaparezca cuando el mouse abandone el contenedor div:

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

Hay una forma realmente sencilla de hacer esto solo con CSS.

Aplique una opacidad a 0, lo que lo hará invisible, pero seguirá reaccionando a los eventos de JavaScript y los selectores de CSS. En el selector de desplazamiento, hazlo 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>

Puede envolver el div oculto en otro div que alternará la visibilidad con los controladores de eventos onMouseOver y onMouseOut 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>

---

---

Utiliza Nuestro Buscador