悬停时更改图像

Question

我试图在悬停时更改图像，但它正在更改具有相同类的所有容器的图像。下面是我正在尝试的代码。

$(function(){
 $(".hover-image").hide();
 $(".tile-image").on({
  mouseenter: function(){
   $(".tile-image").hide();
   $(".hover-image").show();
   
   
    },
 mouseleave: function(){
   $(".tile-image").show();
   $(".hover-image").hide();
 }
 });
 
});

img {
  height: auto;
  width: 100px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="main-wrapper">
  <div class="product">
    <div class="product-tile">
      <div class="image-container primary-images">
        <a href="https://www.google.com">
          <img class= "tile-image" src="https://images.pexels.com/photos/257360/pexels-photo-257360.jpeg">
          <img class= "tile-image hover-image" src="https://images.pexels.com/photos/34950/pexels-photo.jpg">
        </a>
      </div>
    </div>
  </div>
</div>

.main-wrapper在网站中循环

Answer 1

  

已更新

您应该使用此：

$(function() {
          $(".tile-image").on({
            mouseenter: function() {
               $(this).attr('src',$(this).data("mouseenter"));
            },
            mouseleave: function() {
              $(this).attr('src',$(this).data("mouseleave"));
            }
          });
        });

<style>
img {
  height: auto;
  width: 100px;
}

</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="main-wrapper">
          <div class="product">
            <div class="product-tile">
              <div class="image-container primary-images">
                <a href="https://www.google.com">
                  <img class= "tile-image"  data-mouseenter="https://images.pexels.com/photos/34950/pexels-photo.jpg"  data-mouseleave="https://images.pexels.com/photos/257360/pexels-photo-257360.jpeg"src="https://images.pexels.com/photos/257360/pexels-photo-257360.jpeg">
                </a>
              </div>
            </div>
          </div>
        </div>

Answer 2

尝试这个

$(function(){
  $(".tile-image").on({
   mouseenter: function(){
    $(this).attr('src','https://images.pexels.com/photos/257360/pexels-photo-257360.jpeg');
  },
  mouseleave: function(){
    $(this).attr('src','https://images.pexels.com/photos/34950/pexels-photo.jpg');
  }
  });

});