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

【问题标题】：Multiple image elements all fading when hovered in Jquery.多个图像元素在 Jquery 中悬停时全部消失。
【发布时间】：2011-11-16 04:53:03
【问题描述】：

我在对页面上具有相同 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 可以做到这一点，但要尽可能兼容。

希望大家帮忙

干杯，

汤姆

【问题讨论】：

发布您的html，您的selector 可能比您想要的更多。
您的问题解决了吗？我很好奇你是否看过我发布的 jsFiddles。

标签： jquery hover opacity elements fade

【解决方案1】：

您再次find()ing 相同的元素。 $(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

【讨论】：

太好了，谢谢。关于多元素部分的任何线索？
如果.mainArticle 元素在.articleContainer 内部，您将得到意想不到的结果
.articleContainer 可以完全删除。它也不在.articleContainer之内
您需要发布您的 HTML。我会为你把它放在一个 jsFiddle 中

【解决方案2】：

用 $(this) 代替 $(this).find('.mainArticle img, .articleContainer') 怎么样？

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

【讨论】：

恐怕也不会，但是速记非常有用。感谢您的帮助。