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

Question

我正在研究wordpress主题，并希望在悬停时在两个缩略图之间切换。

我的代码看起来像这样：

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

所以现在我需要一些css在悬停时在image1和image2之间切换。

如果有人知道我如何用一些JavaScript来获得淡入淡出的效果，将不胜感激。

Answer 1

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

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中使用某种效果，。也许sprites不是最好的答案，那取决于您想要的效果。 为此，您需要一个类似Mootools或Jquery的框架。

祝好运

Answer 2

您不需要在那里的两个<img>标签，只需引用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才支持此功能。

Answer 3

首先，您要摆脱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");
}

Answer 4

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

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

要进行过渡，请查看CSS过渡：

http://net.tutsplus.com/tutorials/html-css-techniques/css-fundametals-css-3-transitions/