Jquery 将鼠标悬停在一个图像上，然后更改另一个图像。多个首次悬停会影响一个已更改的图像

我在产品页面上有一个产品颜色阴影列表

页面上还有一个大图像

我想能够悬停在其中一个小缩略图从颜色阴影列表，它显示在大图片上，而不是

我有以下代码，但这是不对的。它没有改变

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'));
});​

$（'img[数据悬停]）。悬停（函数（）{
$（this.attr（'tmp'，$（this.attr（'src'））.attr（'src'，$（this.attr（'data-hover'））.attr（'data-hover'，$（this.attr（'tmp'））.removeAttr（'tmp'）；
}).每个（功能）{
$('
有一个JS小提琴为它，但正如你所看到的，它没有工作的预期

它不会影响较大的图片，而是影响正在悬停的相同图像

Live site旨在更清楚地理解我的意思：

检查此演示：

代码：

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） 您尚未使用
关闭脚本标记。查看源代码，您将看到最后一个脚本标记（包含上述代码的脚本标记）尚未关闭

b） 上面的代码需要放入
$（document）.ready（function（）{}）；
块中，以确保DOM已就绪并已加载

i、 应该是

<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>


$（文档）.ready（函数（）{
var mi=$（“#主图像”）；
//此代码将为您完成其余的工作
$（'img[data hover]'）。悬停（函数（）{
mi.data（'prevsrc'，mi.attr（'src'））.attr（'src'，$（this.attr（'data-hover'））；
}，函数（）{
mi.attr（'src'，mi.data（'prevsrc'）；
});
}
为什么两次调用
attr（）
，我建议：（如果您使用的是自定义属性，我建议使用）@DavidThomas-是的，这是有道理的。这在JS小提琴中似乎很好，但当传到网站上时，它似乎不起作用。这是因为主图片位于颜色阴影的另一个部分吗？你的页面上似乎有几个问题。a）您还没有用
关闭脚本标记。b）上面的代码需要放入
$（document）.ready（function（）{}）中
block以确保DOM已准备就绪并已加载。您好，我已经查看并检查了脚本标记，但它们都显示为关闭状态。也输入了新脚本，但仍然没有任何内容？www.rubytuesdaycreative.co.uk/testsite/snood.html