-1
I’m trying to make sure that when I hover the mouse over an image, show one that I have in figcaption, and as soon as I leave with the mouse on top of figcaption, it hides figcaption and shows the image that was.
My problem is that if I click 1 cm below the text, it looks like it is blinking (opening and closing).
Function of javascript
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>
why not use onmouseover and onmouseout on the same element instead of using one on div and the other on figcaption? I believe that is why it is blinking, because it can be with the mouse on top of the div but outside the figcaption then ends up calling the two functions.
– user83428
Before I had done this only that in the img and not in the main div,now it worked ,was just this,Thank you and sorry any trouble.
– Robson Oliveira
Try changing the
onmouseout
foronmouseleave
.– Sam
Hi Robson, I read the question and I still don’t understand what you want to show when the mouse goes over. You can explain better?
– Sergio