jquery 中的 mouseenter 和 mouseover 动画

Question

我卡在 jquery 属性上了。我想用属性鼠标进入和鼠标离开产生过度效果，但我有几张图片，我想只在鼠标进入这一张时在其中一张上做。

我尝试输入几个 class 名称，但是这对所有图像都没有任何悬停效果，而不仅仅是在活动图像上。

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

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

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

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

    });
});

Answer 1

要执行您需要的操作，请将所有 .lvinfosN 元素更改为具有相同的 class。我建议 .lvinfos。然后在事件处理程序中使用this关键字来引用引发事件的元素，并使用DOM遍历来定位相关元素向上或向下滑动。在这种情况下 find() 将起作用。

请注意，可以使用 hover() 方法和 slideToggle() 来缩短代码。此外，值得调用 stop() 以防止当用户重复鼠标 in/out 元素时多个动画排队。

$(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 class="l_villa">
    <a href="./img/villa1.png" alt="villa1">
      <img id="lv1" src="./img/villa1.png" alt="villa1">
    </a>
    <div class="lvinfos">
      Lorem ipsum dolor sit amet.
    </div>
  </div>

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

jquery 中的 mouseenter 和 mouseover 动画

mouseenter and mouseover for over animation in jquery

javascript

html

jquery