javascript - 使用此选择器选择特定的 img

Question

我在使用选择器this时遇到问题。我有几个 div 里面有图片。我对图片应用了一个类以使它们成为灰度，当我悬停链接时，我希望它们删除该类。html 会是这样的：

div class="box">
    <a class="articol" href="#">
      <img src="image.jpg">
      <p>some text</p>
    </a>
</div>
div class="box">
    <a class="articol" href="#">
      <img src="image.jpg">
      <p>some text</p>
    </a>
</div>

js会是这样的：

$(function() {
  $("a.articol").hover(function(){
     $(".box img.desaturate").removeClass('desaturate');
  }, function() {
     $(".box img").addClass('desaturate');
});});

唯一的问题是我只想要我悬停的图像来删除.desaturate类。但它会从所有图像中删除该类。

Answer 1

$(function() {
  $("a.articol").hover(function(){
     $(this).find("img.desaturate").removeClass('desaturate');
  }, function() {
     $(this).find("img").addClass('desaturate');
});});

Answer 2

$('.articol').hover(function(){
     $(this).children('img').removeClass('desaturate');
  }, function() {
     $(this).children('img').addClass('desaturate');
});

Answer 3

尝试这个。

$(function() {
  $("a.articol").hover(function(){
     $(".box img.desaturate").removeClass('desaturate');
     $(this).addClass('desaturate');;
  });

  $("a.articol").blur(function(){
     $(".box img.desaturate").removeClass('desaturate');
  });
});