Hide and show using javascript

Question

Hide and show using javascript

Navigation

#1 by (1 votes)
#2 by (0 votes)

-1

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>

javascript html css

asked by anonymous 23.08.2017 / 02:53

2 answers

Error converting value to JTable [closed] modal 100% with CSS

score 1 · Answer 1

I believe that what you are trying to do is, when you mouse over the image, the figcaption is displayed. For this, you can only solve with css by encapsulating everything in the figure tag and placing a hover in this tag. Here 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>

score 0 · Answer 2

You said:

I'm trying to make the mouse hover over an image, show one in figcaption, and as soon as I exit with the mouse above figcaption, it hides the 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 trigger that handler on 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 so that you could see the event better but can take away from your code.

This link: Category: mouse events talks about mouse events.

I hope I have helped!