jQuery只选择子类并非全部

Question

我想展示一些图片，当我徘徊在别人身上时。到目前为止，我已经试过了：

$('.image').hover(function() { 
    $('.icon').stop().animate({"opacity": 1}); 
},function() { 
    $('.icon').stop().animate({"opacity": 0}); 
}); 

但我不想显示所有图像，当我悬停在一个图像上。

我有这个demo

现在我想，当我徘徊与.image类的图像，只有在与.icon类的形象，是一个我悬停，并不是所有的clild改变opacity。

我将第一张图像只悬停在图像变化opacity，而不是两个。我徘徊第二个图像，只有图像变化opacity

任何想法？

编辑：

我忘了提，我想，是自我表现留在我悬停在它的形象。其实这两个图像是一个在一个里面。请参阅更新fiddle

Answer 1

您可以使用.siblings()这样：

$('.image, .icon').hover(function(e) { 
    if(e.type === 'mouseenter' && $(e.target).is('.image')){ 
     $('.icon').stop().animate({"opacity": 0}); 
     $(this).siblings('.icon').stop().animate({"opacity": 1}); 
    } 
    if(e.type === 'mouseleave' && $(e.target).is('.icon')){ 
     $('.icon').stop().animate({"opacity": 0}); 
    } 
}); 

，改变你的背景下，以目前的选择与$(this)

UPDATED Fiddle demo

Answer 2

试试这个代码

$('div').hover(function() { 
    $(this).children('.icon').stop().animate({"opacity": 1}); 
},function() { 
    $(this).children('.icon').stop().animate({"opacity": 0}); 
}); 

FIDDLE

Answer 3

你可以使用jQuery $（this）来指示当前类元素，你可以使用父（）。找到（'元素或类或ID名称“）遍历适当的元素

$('.image').hover(function() { 
$(this).parent().find('.icon').stop().animate({"opacity": 1}); 
},function() { 
$(this).parent().find('.icon').stop().animate({"opacity": 0}); 
});