当在Jquery中盘旋时，多个图像元素都会褪色。

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

首先我将图像淡化到60％，然后在hover时我希望它只有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)是hover元素，所以你可以将它用于你的hover处理程序：

 $('.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’）？

您正在选择与该选择器匹配的每个元素，但由于您已经hover了一个，您可以使用$（this）并在那里执行更改。