将鼠标悬停在一个图像上，更改另一个图像-具有多个第一个图像
将鼠标悬停在一个图像上，更改另一个图像-具有多个第一个图像
提问于 2012-10-20 03:40:38
我正在尝试创建一个产品选择表，将鼠标悬停在颜色阴影上会改变主要产品图片(以匹配颜色)。
我在现有脚本中遇到的问题是，我无法对只影响一个目标图像的多个第一图像进行设置。
/* Teaser image swap function */
$('img.swap').hover(function () {
this.src = '/images/signup_big_hover.png';
}, function () {
this.src = '/images/signup_big.png';
});我找到了这个脚本，但不确定如何将其转换为接受多个图像。
我拥有的当前超文本标记语言的JS Fiddle。当表格中的一张图片悬停在上面时，下面的图片应该会发生相应的变化。
如果你想更好地了解我正在尝试创建的内容，可以使用现场网站here。
我热衷的一个部分是不让图片包含在链接中，因为这会导致点击时页面跳转(它们与表单一起工作，所以实际上不能更改)。
回答 1
Stack Overflow用户
发布于 2012-10-20 03:46:24
实际上，我有一个更简单的解决方案：
对于您想要换出的每个图像，只需给它们提供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'));
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/12981334
复制相关文章
相似问题
腾讯云开发者
