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

【问题标题】：Switch between two images in html with css使用css在html中的两个图像之间切换
【发布时间】：2011-05-10 05:26:50
【问题描述】：

我正在开发一个 wordpress 主题，并希望在悬停时在两个缩略图图像之间切换。

我的代码看起来像这样：

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

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

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

【问题讨论】：

标签： javascript html css hover

【解决方案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 中添加一些效果。也许精灵不是最好的答案，这取决于你想要的效果。为此，您需要像 Mootools 或 Jquery 这样的框架。

祝你好运

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

你不需要两个<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 才支持此功能。

【讨论】：

【解决方案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/

【讨论】：