在html中用css切换两个图像 [英] Switch between two images in html with css

问题描述

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

我的代码看起来像这样：

 < ; a class =thumbhref =posturl> < img src =img1.jpgclass =image1/> < img src =img2.jpgclass =image2/> < / A> 
  

因此，现在我需要一些css在悬停时在image1和image2之间切换。

如果有人知道我可以通过一些javascript来获得淡入淡出效果，我们将不胜感激。

解决方案

首先，您想摆脱img标签并仅使用css：

  a：link {
 background：url（img1.jpg）; 
} 
 a：hover {
 background：url（img2.jpg）; 
} 
  

您可以使用javascript，但会变得非常复杂，但CSS3会褪色即将推出的效果：

  a：link {
 background：url（img1.jpg）; 
 -webkit-transition：背景1s缓和; 
 -moz-transition：background 1s ease-in; 
 -o-transition：背景1s缓和; 
转换：背景1s易入; 
} 
 a：hover {
 background：url（img2.jpg）; 
} 
  

I'm working on a wordpress theme and want to switch between two thumbnail images on hover.

The code that i have looks something like this :

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

So now I need some css to change between image1 and image2 on hover.

And if somebody knows how i can get a fade effect with some javascript that would be greatly appreciated.

解决方案

First, you want to get rid of the img tags and use only css:

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

You could use javascript but that would get very complicated, CSS3 however will have fade effects ready soon:

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");
}

这篇关于在html中用css切换两个图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！