I'm trying to make the mouse move over an image, show one in the figcaption, and as soon as I exit with the mouse from above the figcaption, it hides the figcaption and shows the image that was.
My problem is that if I click 1cm below the text, it looks like it has blinking (opening and closing).
javascript function
function esconderdiv()
{
document.getElementById("teste").style.display = "none";
}
function mostrardiv()
{
document.getElementById("teste").style.display = "block";
}
.grid{
position: absolute;
top:0;
left:0;
background: #213245;
height: 131px;
width: 131px;
margin-top:9px;
margin-left:30px;
opacity: 0px;
}
<div class="row" >
<div class="col-md-2" > <img class="img-responsive" src="_imagens/1.png" onmouseover="mostrardiv()">
<figcaption id="teste" class="grid" onmouseout="esconderdiv()">
<h3 align="center" style="color:#fff;">Biologia</h3>
<div align="center" class="link"><a onClick="openNav1()">Questões</a></div>
</figcaption>
</div>
</div>