Question

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

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

但我不想在我悬停在一张图片上时显示所有图像。

我有demo

现在我希望当我将鼠标悬停在包含课程.image的图片上时，仅在图片中更改opacity，其中.icon类是我悬停的那个，而不是全部。

我只将第一张图片悬停在图像更改opacity上，而不是两者。我将第二张图片悬停，仅向下移动图片opacity

有什么想法吗？

修改

我忘了提到我希望当我将鼠标悬停在它上面时，显示的图像会停留。实际上这两幅图像是彼此相同的。查看更新的fiddle

Answer 1

试试此代码

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

FIDDLE

Answer 2

您可以这样使用.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 3

你可以使用jquery $（this）来表示当前的class元素，你可以使用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}); 
});

jQuery选择只有类不是全部的子类

3 个答案: