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

【问题标题】：How can I use jQuery to make an image fade on a hover?如何使用 jQuery 使图像在悬停时淡出？
【发布时间】：2015-04-16 05:00:56
【问题描述】：

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

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

谢谢，本

【问题讨论】：

【解决方案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>

这是一个有效的小提琴：

【讨论】：

谢谢大家，这非常有帮助。我的部分问题是在 JSFiddle 上我没有使用正确的框架（需要是 jQuery 2.1.3）。在加载脚本之前，我是否需要在我的 html 中加载该库？
是的 Bennet_up，您需要在任何 jQuery 工作的代码之前包含它，我确实必须在小提琴中这样做，但忘了提及这一点。这适用于任何时候你看到像 jQuery() 或 $()

【解决方案2】：

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

【讨论】：

【解决方案3】：

试试这个

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

这会解决你的问题

【讨论】：