Hide and show using javascript

Asked

Viewed 248 times

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

javascript html css
  • 1

    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.

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

  • Try changing the onmouseout for onmouseleave.

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

2 answers

1

I believe that what you want to do is, when passing the mouse in the image is displayed the figcaption. For this, you can solve only with css encapsulating everything in the tag figure and putting a hover in this tag. Below is an example:

figure {
  position: relative;
  height: 131px;
  width: 131px;
}
img {
  background: #000;
  height: 131px;
  width: 131px;
}
figcaption {
  display: none;
  position: absolute;
  top:0;
  left:0;
  background: #213245;
  height: 131px;
  width: 131px;
  margin-top:9px;
  margin-left:30px;
  opacity: 0px;
}
figure:hover figcaption {
  display: block;
}
<div class="row" >
  <div class="col-md-2">
    <figure>
      <img class="img-responsive" src="_imagens/1.png">
      <figcaption>
        <h3 align="center" style="color:#fff;">Biologia</h3>
        <div align="center" class="link"><a onClick="openNav1()">Questões</a></div>
      </figcaption>
    </figure>
  </div>
</div>

0

You said:

I’m trying to make sure that when I hover the mouse over an image, I show one that’s in figcaption, and as soon as I get out with the mouse on top of figcaption, it hides figcaption and shows the image that was.]

The mouse event in this case is onmouseleave because it is an event handler to be triggered when the mouse exits an element or triggers this handler in an element.

So I made a code like this:

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
<style type="text/css">
    .grid{
    position: absolute;
    top:0;
    left:0;
    background: #213245;
    height: 131px;
    width: 131px;
    margin-top:9px;
    margin-left:30px;
    opacity: 0px;
}
.img-responsive{
        position: absolute;
    top:0;
    left:0;
    width: 131px;
    height: 131px;
    background-color: red;
    margin-top:9px;
    margin-left:30px;
    opacity: 0px;
}
</style>    
</head>
<body>
     <div class="row" >
          <div class="col-md-2" > <img class="img-responsive" src="_imagens/1.png" onmouseover="mostrardiv()">
              <figcaption id="teste" class="grid" onmouseleave="esconderdiv()">
                      <h3 align="center" style="color:#fff;">Biologia</h3>
                      <div align="center" class="link"><a onClick="openNav1()">Questões</a></div>
              </figcaption>
          </div>
     </div> 
</body>
<script type="text/javascript">
function esconderdiv() {
    document.getElementById("teste").style.display = "none";
}

function mostrardiv() {
    document.getElementById("teste").style.display = "block";
}
</script>
</html>

I created the img-Responsive class just for you to see the event better but can take it out of your code.

That link: Category: events of mouse talks about mouse events.

I hope I’ve helped!

Browser other questions tagged javascript html css

You are not signed in. Login or sign up in order to post.