1

我正在尝试创建一个产品选择表，将鼠标悬停在颜色阴影上会更改主要产品图片（以匹配颜色。）

我在现有脚本中遇到的问题是，我无法让设置适用于仅影响一个目标图像的多个第一张图像。

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

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

我拥有的当前 HTML 的JS Fiddle。当表格中的一张图片悬停在上面时，下面的图片应该会相应地改变。

如果您想更好地了解我正在尝试创建的内容，可以在此处访问实时站点。

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

4

1 回答 1

0

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

对于您想要换出的每个图像，只需将它们提供给它们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'));
});
于 2012-10-19T19:46:23.557 回答