想要在悬停时更改 img src，然后在单击时更改为不同的 src答案

【问题标题】：Want to change an img src on hover, then to a different src on click想要在悬停时更改 img src，然后在单击时更改为不同的 src
【发布时间】：2014-09-06 08:01:39
【问题描述】：

我有一个包含 img 的 div - 我希望能够在悬停时更改 img src（然后在未悬停时再次返回），但也可以将相同的 img 更改为完全不同的 src单击（然后在第二次单击时再次返回）。到目前为止，我有 J-Query 代码让它在悬停时改变：

HTML

<div class="tab_box">
   <img id="img1" src="tab.png">
</div>

J-查询

$(document).ready(function(){$('#img1').hover(function(){$(this).attr('src','tabt2.png')},function()
{$(this).attr('src','tab.png')}) });

但我不确定如何在单击后完全更改为不同的 src（因为必须将图像悬停在上面才能单击它！）有人可以建议吗？由于各种调整大小的原因，如果可能的话，我想将图像作为独立图像保留在 div 中，而不是将其作为 div 的背景图像

【问题讨论】：

只需使用 .on('hover', function() 和 .on('click', function() ，然后在点击图片后直接使用 $('#img1').off() 或 $('#img1').off('hover')
感谢您的建议 - 您能否提供一个 js-fiddle 来说明您的实际意思？

标签： javascript jquery image hover click

【解决方案1】：

您可以使用 Jquery 的 .hover() 和 .click() 函数。你用的有语法问题

这是正确的代码：

$('#img1').hover(function () {
    $(this).attr('src', 'http://www.fateheducation.com/fatehnew/Testimonial_Image/avatar-small.png');
});
$('#img1').click(function () {
    $(this).attr('src', 'http://moduleoff.com/sites/all/themes/moduleoff/images/xdruplicon_rotated_small.png.pagespeed.ic.Xl8nCuL4lR.png')
});

Working Fiddle

【讨论】：