如何使用 jQuery 更改 mouseOver 上的图片？ [JSFiddle]答案

【问题标题】：How can I use jQuery to change a picture on mouseOver? [JSFiddle]如何使用 jQuery 更改 mouseOver 上的图片？ [JSFiddle]
【发布时间】：2011-01-28 11:08:26
【问题描述】：

http://jsfiddle.net/nbNbp/

我想在鼠标悬停时切换图片，并在鼠标离开时恢复。这个可以吗？

【问题讨论】：

下次尝试选择不同的图片，我们中的一些人还在工作:)。
stackoverflow.com/questions/4824297/…（相同的代码，不同的事件）和现场预览：jsfiddle.net/nbNbp/6

标签： jquery css image

【解决方案1】：

$('#img').hover(function () {
    $(this).data('old-src', $(this).attr('src')).attr('src', 'http://example.com/new_image.jpg');
}, function () {
    $(this).attr('src', $(this).data('old-src'));
});

【讨论】：

是的，悬停可能是一个更简洁的解决方案。

【解决方案2】：

试试这个，它对我有用：-

$("div#test > img").mouseover(function(){
    $(this).attr('src', 'http://www.google.co.uk/images/logos/ps_logo2a_cp.png');
});
$("div#test > img").mouseout(function(){
    $(this).attr('src', 'http://www.google.co.uk/intl/en_ALL/images/logos/images_logo_lg.gif');
});

【讨论】：