mouseenter and mouseover for over animation in jquery-CodePudding

I'm stuck on a jquery property. I want make an over effect with property mouse enter and mouse leave but i have several images and i would like to do it only on 1 when the mouse enters on this one.

I tried to put several class name but nothing does the hover effect this puts on all the images and not only on the active one.

<div id="villas">
                <div >
                    <a href="./img/villa1.png" alt="villa1">
                        <img id="lv1" src="./img/villa1.png" alt="villa1">
                    </a>
                    <div >
                        Lorem ipsum dolor sit amet.
                    </div>
                </div>

                <div >
                    <a href="./img/villa2.png" alt="villa2">
                        <img  src="./img/villa2.png" alt="villa2">
                    </a>
                    <div >
                        Lorem ipsum dolor sit amet.
                    </div>
                </div>

$(document).ready(function(){
    $(".l_villa").mouseover(function(){
        $(".lvinfos1").slideUp("slow");

    });
    $(".l_villa").mouseleave(function(){
        $(".lvinfos1").slideDown('slow');

    });
});

CodePudding user response：

To do what you require change all the .lvinfosN elements to have the same class. I would suggest .lvinfos. Then in the event handler use the this keyword to refer to the element that raised the event, and use DOM traversal to target the related element to slide up or down. In this case find() will work.

Note that the code can be shortened by using the hover() method along with slideToggle(). In addition it's worth calling stop() as well to prevent multiple animations being queued when the user repeatedly mouses in/out of the element.

$(document).ready(function() {
  $('.l_villa').hover(function() {
    $(this).find('.lvinfos').stop(true).slideToggle("slow");
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div id="villas">
  <div >
    <a href="./img/villa1.png" alt="villa1">
      <img id="lv1" src="./img/villa1.png" alt="villa1">
    </a>
    <div >
      Lorem ipsum dolor sit amet.
    </div>
  </div>

  <div >
    <a href="./img/villa2.png" alt="villa2">
      <img  src="./img/villa2.png" alt="villa2">
    </a>
    <div >
      Lorem ipsum dolor sit amet.
    </div>
  </div>
</div>