悬停在一个图像上，改变另一个。多次首次悬停会影响一个更改的图像

Question

我在产品页面上有一个产品色调列表。

页面上还有一张大图。

我希望能够将鼠标悬停在色度列表中的一个小缩略图上，然后将其显示在大图片上。

我有以下代码，但这不正确。它不会更改mainpic，而是更改其悬停在其上的图像....

$('img[data-hover]').hover(function () {
    $(this).attr('tmp', $(this).attr('src')).attr('src', $(this).attr('data-hover')).attr('data-hover', $(this).attr('tmp')).removeAttr('tmp');

}).each(function () {
    $('<img />').attr('src', $(this).attr('data-hover'));
});​

有一个 JS Fiddle here，但是你可以看到它没有按预期工作。

悬停不会影响较大的图片，而是会影响悬停在同一图像上的图像。

现场直播是为了更清楚地理解我的意思：

Ruby Tuesday Creative Site

Answer 1

查看此演示：http://jsfiddle.net/Uc9ch/8/

代码：

var mi = $('#mainImage');

// this code will do the rest for you
$('img[data-hover]').hover(function () {
    mi.data('prevsrc', mi.attr('src')).attr('src', $(this).attr('data-hover'));
}, function() {
    mi.attr('src', mi.data('prevsrc'));     
});

---

更新：

您的页面上似乎有几个问题。

a) 您尚未使用</script> 关闭脚本标签。查看源码，你会看到最后一个脚本标签（包含上面代码的那个）没有关闭。

b) 上面的代码需要放在$(document).ready(function() { <insert-above-code-here> }); 块中，以确保 DOM 已准备好并已加载。

即应该是

<script>
$(document).ready(function() { 

    var mi = $('#mainImage');

    // this code will do the rest for you
    $('img[data-hover]').hover(function () {
        mi.data('prevsrc', mi.attr('src')).attr('src', $(this).attr('data-hover'));
    }, function() {
        mi.attr('src', mi.data('prevsrc'));     
    });

}
</script>