悬停在图像上，更改另一个图像 - 使用多个第一张图像

Posted 2023-05-08

【中文标题】悬停在图像上，更改另一个图像 - 使用多个第一张图像

【英文标题】：Hover on an image, change another image - with MULTIPLE first images

【发布时间】：2012-10-10 11:40:11

【问题描述】：

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

我在使用现有脚本时遇到的问题是，我无法让设置适用于仅影响一个目标图像的 MULTIPLE first images。

/* 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。

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

【问题讨论】：

不知何故，您的小提琴中似乎缺少 javascript...

【参考方案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'));
);

【讨论】：

data-imgLocation 应该在哪里声明？你能帮我解决这个问题吗？ jsfiddle.net/Uc9ch/1

刚刚添加了 HTML，您只需使用您的值创建 html5 数据属性

关于这个的快速问题。图像交换部分，我怎样才能有两个图像？这应该是一个链接吗？我不希望悬停的图像是主图片中显示的图像，它需要是不同的图像jsfiddle.net/Uc9ch/4

哦，你的意思是每个Image都有一个翻转，当你离开它时，又回到原来的？

刚刚更新，我的库中的代码，非常易于使用:) 任何带有data-hover="" 的图像在悬停时都会翻转！