Javascript 使用css在html中的两个图像之间切换

我正在处理一个wordpress主题，想在hover上的两个缩略图之间切换

我的代码如下所示：

<a class="thumb" href="posturl"> <img src="img1.jpg" class="image1" /> <img src="img2.jpg" class="image2" /> </a>

所以现在我需要一些css在悬停时在image1和image2之间进行更改

---

如果有人知道我如何使用javascript获得淡入淡出效果，我将不胜感激

这里不需要两个

标记，只需引用CSS中的图像和悬停状态：

a.thumb
{ 
   background-image: url(img1.jpg);
}

a.thumb:hover 
{ 
   background-image: url(img2.jpg);
}

最基本的悬停示例

您还可以使用CSS精灵：

a.thumb
{ 
   background-image: url(img1_sprite.jpg);
   background-position: 0 0;
}

a.thumb:hover 
{ 
   background-image: url(img1_sprite.jpg);
   background-position: -60px 0; /*see below*/
}

这会将背景推到左侧，其中60px是第二幅图像的宽度

对于褪色图像，您可以使用CSS3转换，但IE在版本9之前不支持此功能

a .image1 { display: inline; }
a .image2 { display: none; }

a:hover .image1 { display: none; }
a:hover .image2 { display: inline; }

对于转换，请查看css转换：

---

首先，您希望摆脱img标签，只使用css：

a:link {
background: url("img1.jpg");
}
a:hover {
background: url("img2.jpg");
}

您可以使用javascript，但这会变得非常复杂，但是CSS3很快就会有淡入淡出效果：

a:link {
background: url("img1.jpg");
-webkit-transition:background 1s ease-in;  
-moz-transition:background 1s ease-in;  
-o-transition:background 1s ease-in;  
transition:background 1s ease-in;  
}
a:hover {
background: url("img2.jpg");
}

---

如果您使用的是大图像，请在使用悬停时小心。。浏览器可能需要一段时间才能首次显示图像。要避免这种情况，请尝试使用精灵并更改悬停时的背景位置

a.thumb
{ 
   background-image: url(img.jpg) no-repeat 0 0;
}

a.thumb:hover 
{ 
   background-image: url(img.jpg) no-repeat -100px 0; /*set to the position of the second image*/
}

如果你想在js中获得一些效果。。也许精灵不是最好的答案，这取决于你想要的效果。为此，您需要一个类似Mootools或Jquery的框架

祝你好运