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小提琴here，但你可以看到它没有按预期工作。

而不是影响LARGER pic的悬停，它会影响正在盘旋的相同图像。

直播网站是为了更清楚地了解我的意思：

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>

将鼠标悬停在一张图片上，更换另一张多个第一次悬停会影响一个更改的图像

1 个答案: