使用 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

如果您使用大图像，则使用悬停时要小心。浏览器第一次可能需要一段时间才能显示图像。为了避免这种情况，如果你想在 js 中获得一些效果，请尝试使用精灵并更改悬停时的背景位置

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

。也许精灵不是最好的答案，这取决于你想要的效果。为此，您需要一个像 Mootools 或 Jquery 这样的框架。

祝你好运

Answer 2

您不需要其中的两个 标签，您只需在 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/