Question

我正在尝试创建一个产品选择表，其中悬停在色调上会改变主要产品图片（以匹配颜色。）

我对现有脚本的问题是，我无法让设置适用于仅影响一个目标图像的MULTIPLE第一个图像。

/* Teaser image swap function */
    $('img.swap').hover(function () {
        this.src = '/images/signup_big_hover.png';
    }, function () {
        this.src = '/images/signup_big.png';
    });

我找到了这个脚本，但不知道如何将其转换为接受多个图像。

JS Fiddle了解我当前的HTML。当表格中的一个图像悬停在上面时，下面的图片应该改变为对应。

如果您想要更好地了解我正在尝试创建的内容，则可以使用实时网站here。

我热衷的一个部分是不要将图像包含在链接中，因为这会在单击时导致令人讨厌的页面跳转（并且它们与表单一起工作，因此无法真正更改。）

Answer 1

我实际上有一个更简单的解决方案：

对于您想要换出的每张图片，只需给它们data-hover并瞧瞧:)。

<img src="normalLocation.jpg" data-hover="newLocation.jpg" />

JS：

// this code will do the rest for you
$('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'));
});

将鼠标悬停在图像上，使用MULTIPLE第一张图像更改另一张图像

1 个答案: