Javascript 如何通过jQuery的类实现悬停的div？

我有一个jQuery函数，它在类.myshp\u list\u product\u image的s的mouseover和mouseout事件上更改它们的src属性

问题是当我将其中一个悬停时，它也会改变其他的。我如何使它只改变被悬停的那个

下面是函数的代码：

$(function() {
  $('.myshp_list_product_image').mouseover(function() {
    $('.myshp_list_product_image').each(function() {
      var $this = $(this);
      $this.attr('src', $this.attr('src').replace('1s', '2s'));
    });
  });
  $('.myshp_list_product_image').mouseout(function() {
    $('.myshp_list_product_image').each(function() {
      var $this = $(this);
      $this.attr('src', $this.attr('src').replace('2s', '1s'));
    });
  });
});

你不需要，这里的每一个人，都把它扔掉。您只需要针对当前元素，即此元素

---

我建议您使用mouseenter和mouseleave事件，这是mouseover和mouseenter之间的一个很小的区别，只针对当前悬停/悬停的元素，而不是使用同一类迭代所有元素

您还可以使用.hover而不是mouseover和mouseout以及.attr的回调函数来最小化代码：

 $('.myshp_list_product_image').hover(
 function() {
    $(this).attr('src',function(i,oldattr){return oldattr.replace('1s', '2s')}); 
 }, function() {
    $(this).attr('src',function(i,oldattr){return oldattr.replace('2s', '1s')}); 
 });

---

我会使用。从jQuery悬停

$(function () {
    $('.myshp_list_product_image').hover(function () { // mouse in
        var $this = $(this);
        $this.attr('src', $this.attr('src').replace('1s', '2s'));

    }, function () { // mouse out
        var $this = $(this);
        $this.attr('src', $this.attr('src').replace('2s', '1s'));

    });
});

---

该死，我在写，伙计：

$(function () {
    $('.myshp_list_product_image').hover(function () { // mouse in
        var $this = $(this);
        $this.attr('src', $this.attr('src').replace('1s', '2s'));

    }, function () { // mouse out
        var $this = $(this);
        $this.attr('src', $this.attr('src').replace('2s', '1s'));

    });
});