HTML中的输出是这样的:
ProductImage1 ProductImage2 ProductImage3 ProductImage4
Color1 Color2 Color3 Color2 Color4 Color5 Color6
我想要做的是当我将鼠标悬停在上面的任何颜色上时,ProductImage的原始(当前)图像将更改为另一个(以匹配悬停的颜色)。当鼠标离开时,原始图像将会恢复。
这是我为悬停在每个ProductImage上所做的javascript。
var sourceSwap = function () {
var $this = $(this);
var newSource = $this.data('alt-src');
$this.data('alt-src', $this.attr('src'));
$this.attr('src', newSource);
}
$(function () {
$('img.main').hover(sourceSwap, sourceSwap);
});
更新
我从问题中排除了不必要的部分。当我在这里测试jsfiddle.net/4dK2x/27时,@ hunter的答案非常有效。但是,当我将它与我的php部分组合以创建动态列表时,它不起作用。我还在环顾四周,试图找出问题所在。如果我找到解决方案,我会回来更新我的答案。
答案 0 :(得分:0)
您可以通过两种方式执行此操作,您可以使用CSS尝试:
#tagName{
background: url("yourImage.jpg");
}
#tagName:hover{
background: url("anotherImage.jpg");
}
这假设你在图像周围有一个div标签,你也可以引用类id等等(阅读CSS以获取更多细节)。
或者你可以通过JavaScript来实现 假设你没有使用JQuery(我需要更多地熟悉JQuery)
var image1 = document.getElementById("nameofDivTag");
//on hovering kinda forgotten the JS version of hovering, JQuery has probably easier way
image1.style.background("url:("aDifferentImage.jpg"));
如果我错了!如果不是耶! 希望它有所帮助
答案 1 :(得分:0)
如果您模仿类似的html结构,这里有更新的代码,可以根据需要使用多套产品
$('.image .toggles img').hover(function () {
var src = $(this).attr("src");
var $main = $(this).closest(".image").find(".main");
$main.attr("toggle", $main.attr("src")).attr("src", src);
},
function () {
var $main = $(this).closest(".image").find(".main");
$main.attr("src", $main.attr("toggle"));
});