Javascript鼠标悬停/鼠标悬停动画仅适用于第一次迭代

Question

我创建了一个JavaScript动画，以将鼠标悬停时将图片向右移动，并在鼠标退出图像时返回其静止位置。 它对于第一张图片完美无瑕，但是当我尝试其他迭代时，第一张图片会移动，而不是我悬停的图片。

这是HTML代码：

        <div class="sectionJoueur">

            <div class="scroller">

                <figure id="infos" class="nomPositionCourt A">
                    <img src="images/infoMathieuD.png">
                </figure>

                <figure class="img">
                    <img src="images/md.jpg">   
                </figure>

            </div>

        </div>

       <div class="sectionJoueur">

            <div class="scroller">

                <figure id="infos" class="nomPositionCourt B">
                    <img src="images/infoMathieuD.png">
                </figure>

                <figure class="img">
                    <img src="images/md.jpg">   
                </figure>

            </div>

        </div>

        <div class="sectionJoueur">

            <div class="scroller">

                <figure id="infos" class="nomPositionCourt C">
                    <img src="images/infoMathieuD.png">
                </figure>

                <figure class="img">
                    <img src="images/md.jpg">   
                </figure>

            </div>

        </div>

我正在尝试使用名称为“ class =“ nomPositionCourt A”>”的类作为目标，将特定的图像悬停在其上，但它似乎无法正常工作。

这是JS代码：

    function over(){

       if ( $("#infos").hasClass("A") ){   
          $("#infos").stop().animate({"margin-left": +0});
          $(".img").mouseleave(out);
       }
       else if ( $("#infos").hasClass("B") ){
          $("#infos").stop().animate({"margin-left": +0});
          $(".img").mouseleave(out);
       }
    }

    function out(){
       $("#infos").stop().animate({"margin-left": -287});
    }

Answer 1

您已将id属性分配给多个元素，这些元素假定是唯一的id="infos"类可以分配给多个元素，但id应该是唯一的

通过将id更改为class来尝试这一操作

   $(".nomPositionCourt").hover(function(){
   if ( $(this).hasClass("A") ){   
      $(this).stop().animate({"margin-left": +0});
      $(".img").mouseleave(out);
   }
   else if ( $(this).hasClass("B") ){
      $(this).stop().animate({"margin-left": +0});
      $(".img").mouseleave(out);
   }
  },function(){
  $(this).stop().animate({"margin-left": -287});
  })

在$(this)您具有当前悬停图像的对象

这是参考

Answer 2

乍一看，原因似乎是两个图像都使用相同的ID标签（这是不好的做法）。

这是我正在查看的代码：

图id =“ infos”

您两次使用相同的ID标签。 当您的代码运行时，它将拾取它所涉及的第一个“信息”标签，这是您的第一张图片。

确保使用唯一的ID标签，这将有助于解决您的问题。