Hide divs when the mouse is out?

Question

Hide divs when the mouse is out?

Navigation

#1 by (1 votes)

0

I have such a structured code

<?php 
$p=0;
$delay=0;
while($p<=16){ 
   $p++;
   $delay+=0.2;
   ?>
   <div class="column wow fadeInDown" onmouseout="outside(<?=$p; ?>)" onmouseover="inside(<?=$p; ?>)" data-detail="<?=$p; ?>" data-wow-delay="<?=$delay; ?>S">
      <div class="details detail<?=$p; ?>" style="">
          <div style="position:absolute;top:50%;left:50%;transform: translate(-50%,-50%);color:white;">
              <b>Nome do Produto</b>
          </div>
      </div>
   <img src="images/teste/<?=$p; ?>.jpg" style="max-width:100%;" />
   </div>
<?php } ?>

In the above code there is a gallery of images where when you go over it would show the name of the product. However, when I step on top it shows but if I move on to another the previous one holds. How do I hide others and keep the same?

Here are the functions inside and outside

function inside(e){
    $(".detail"+e).fadeIn(500);
}
function outside(e){
    $(".detail"+e).fadeOut(500);
}

html jquery

asked by anonymous 23.03.2018 / 20:13

1 answer

How to implement a bootstrap menu in an Angular project? Toolbar hiding a piece of textview

score 1 · Accepted Answer

Working with jQuery animations in these cases is somewhat complicated because the animation happens in an asynchronous way. When you move the mouse on an element, it goes out and back at the same time, an run over occurs because the animation may not have finished yet and it triggers another one on the top, causing undesirable effects.

I suggest doing this using only CSS with transition in opacity and visibility together. In this way the effect is the same and no problems occur. Here's what CSS looks like:

.details{
   visibility: hidden;
   opacity: 0;
   transition: all 0.5s;
}

.fadeInDown:hover .details{
   opacity: 1;
   visibility: visible;
}

And you will not need the events onmouseover and onmouseout .

See example:

*{
   position: relative
}

.details{
   visibility: hidden;
   opacity: 0;
   transition: all 0.5s;
}

.fadeInDown:hover .details{
   opacity: 1;
   visibility: visible;
}

<div class="column wow fadeInDown" data-detail="1" data-wow-delay="<?=$delay; ?>S">
   <div  class="details detail1" style="">
       <div style="position:absolute;top:50%;left:50%;transform: translate(-50%,-50%);color:;">
           <b>Nome do Produto1</b>
       </div>
   </div>
   <img src="https://www.cleverfiles.com/howto/wp-content/uploads/2016/08/mini.jpg"style="max-width:20%;" />
</div>

<div class="column wow fadeInDown" data-detail="2" data-wow-delay="<?=$delay; ?>S">
   <div class="details detail2" style="">
       <div style="position:absolute;top:50%;left:50%;transform: translate(-50%,-50%);color:;">
           <b>Nome do Produto2</b>
       </div>
   </div>
   <img src="https://www.cleverfiles.com/howto/wp-content/uploads/2016/08/mini.jpg"style="max-width:20%;" />
</div>

<div class="column wow fadeInDown" data-detail="2" data-wow-delay="<?=$delay; ?>S">
   <div class="details detail3" style="">
       <div style="position:absolute;top:50%;left:50%;transform: translate(-50%,-50%);color:;">
           <b>Nome do Produto2</b>
       </div>
   </div>
   <img src="https://www.cleverfiles.com/howto/wp-content/uploads/2016/08/mini.jpg"style="max-width:20%;" />
</div>