Hide Ivs when mouse is out?

Asked

Viewed 36 times

0

I have a code so structured

<?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 code above there is an image gallery where passing over would show the name of the product. However, when I step over it, it shows but if pass to another the previous one remains. How do I hide others and keep the same?

These are the functions inside and outside

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

    should not have a "." point before Detail on $("detail"+e).fadeOut(500);?

  • @Only a typographical error, I will correct, but even normal does not work

  • Where the CSS style of code?

1 answer

1


Working with jQuery animations in these cases is a little complicated because the animation happens so asynchronous. When you mouse an element, it goes out and comes back at the same instant, it run over because the animation may not have finished yet and already fires another on top, occurring undesirable effects.

I suggest doing this effect using only CSS with transition in opacity and visibility together. This way the effect is the same and no problems occur. See how CSS would look:

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

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

And you won’t 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>

Browser other questions tagged html jquery

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