在Jquery中悬停时，多个图像元素全部消失。

Question

我在将淡入淡出仅应用于具有相同ID的页面上的一个元素时遇到问题。

首先，我将图像降低到60％，然后将鼠标悬停在图像上，使其仅100％。 此部分有效，但是将效果应用于页面上的每个元素。

// Fading images
$(document).ready(function(){

$('.mainArticle img').fadeTo('slow', 0.6);

$('.mainArticle img, .articleContainer').hover(function(){

    $(this).find('.mainArticle img, .articleContainer').stop(true,true).fadeTo("slow", 1.0);
},function(){
    $(this).find('.mainArticle img, .articleContainer').stop(true,true).fadeTo("slow", 0.6); 
}); 
});

我也知道，如果CSS但可以做到尽可能兼容，则可以做到这一点。

希望你们能提供帮助，

干杯，

汤姆

Answer 1

您将find()再次具有相同的元素。 $(this)是悬停的元素，因此您可以将其用于悬停处理程序：

$('.mainArticle img, .articleContainer').hover(function(){
  $(this).stop(true,true).fadeTo("slow", 1.0);
},function(){
  $(this).stop(true,true).fadeTo("slow", 0.6); 
});

但是，我想我理解您要尝试做的事情，并且取决于您的HTML（如果可以发布HTML，这会容易得多），您可能需要将其更改为以下内容：

$(function(){
  $('.mainArticle img').fadeTo('slow', 0.6);

  $('.articleContainer').hover(function(){
    $(this).find('.mainArticle img').stop(true,true).fadeTo("slow", 1.0);
  },function(){
    $(this).find('.mainArticle img').stop(true,true).fadeTo("slow", 0.6); 
  });
});

---

仅使一张图像消失： jsFiddle

随着多个图像淡入淡出： jsFiddle

Answer 2

仅使用$（this）而不是$（this）.find（'。mainArticle img，.articleContainer'）怎么样？

您正在选择与该选择器匹配的每个元素，但是由于您已经将鼠标悬停在其中，因此可以只使用$（this）并在其中执行更改。