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

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

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 中的一些效果.. 也许 Sprite 不是最好的答案，这取决于你想要的效果。为此，您需要一个框架，例如 Mootools 或 Jquery。

祝你好运