jQuery选择仅含类的子级而非全部

我想在其他图像上悬停时显示一些图像。到目前为止，我已经尝试过：

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

但是当我停留在一张图片上时，我不想显示所有的图片

我有这个

现在，当我将鼠标悬停在一个类为

.image

的图像上时，我希望只在类为

.icon

的图像中更改

不透明度

，这是我悬停的图像的clild，而不是全部

我只将第一张图像悬停在图像更改<代码>不透明度上方，而不是两者。我将第二个图像悬停，仅向下移动图像更改

不透明度

有什么想法吗

编辑：

我忘了提到，我希望在我悬停在上面时显示的图像保持不变。实际上，这两个图像是一个在另一个内部。请参阅更新的

尝试此代码

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

您可以使用jquery$（this）指示当前的类元素，也可以使用parent（）.find（'element或class或id name'）遍历相应的元素

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

---

您可以通过以下方式使用

.sibbins（）

：

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

---

@laaposto-oops回复太晚了，您可以尝试此更新的代码和fiddle链接。