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

祝你好运

Answer 2

你不需要两个<img>标签，你只需要在CSS中引用图像和悬停状态：

a.thumb
{ 
   background-image: url(img1.jpg);
}

a.thumb:hover 
{ 
   background-image: url(img2.jpg);
}

最基本的悬停示例。

你也可以使用CSS sprites：

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/

用hss在html中切换两个图像

4 个答案: