如何使用jQuery在悬停时使图像淡入淡出？

Question

我一遍又一遍地试着查看我的代码，让octo图像在鼠标悬停时褪色，没有运气。这是一个菜鸟问题，但想知道是否有人比我更有意义。

这是我的代码：https://jsfiddle.net/bennett_up/rybc238w/

$('#octo').hover(function(){  
$(this).find('img').stop().fadeTo('slow', 0);},  
function(){  
$(this).find('img').stop().fadeTo('slow', 1);  
});  

谢谢， 本

Answer 1

在小提琴中，我看到图像本身是'#octo'而不是它的孩子，因此你不需要.find（'img'）如下：

$('#octo').hover(function(){  
   $(this).stop().fadeTo('slow', 0);  
},  
function(){  
  $(this).stop().fadeTo('slow', 1);  
});  

HTML供参考：

<ul id="contact">
    <li><img id="octo" src="http://s.icons8.com/wp-content/uploads/2014/01/octopus-128.png" width="28" height="28"></li>
</ul>

这是一个工作小提琴：

https://jsfiddle.net/d6t0waoj/

Answer 2

删除.find('img')，因为$(this)已经引用了图片元素。

Answer 3

试试这个

    $('#octo').hover(function(){  
      $(this).stop().fadeTo('slow', 0); },  
   function(){  
      $(this).stop().fadeTo('slow', 1);  
   }); 

这将解决您的问题