0

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

页面上还有一张大图。

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

我有以下代码，但这不正确。它没有改变它，而是改变了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 ，但正如您所见，它没有按预期工作。

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

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

红宝石星期二创意网站

4

1 回答 1

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>
于 2012-10-20T13:44:13.003 回答