我想为鼠标悬停添加一个简单的混合图像过渡。 悬停本身工作正常。 如果我删除display:none,转换将起作用,但悬停图像交换将分崩离析。任何想法如何解决?
以下是我使用的CSS:
div.effect img.image{
opacity: 1;
-webkit-transition: opacity 0.5s ease-in-out;
-moz-transition: opacity 0.5s ease-in-out;
-o-transition: opacity 0.5s ease-in-out;
-ms-transition: opacity 0.5s ease-in-out;
transition: opacity 0.5s ease-in-out;
display:block;
}
div:hover.effect img.image{
opacity: 0;
-webkit-transition: opacity 0.5s ease-in-out;
-moz-transition: opacity 0.5s ease-in-out;
-o-transition: opacity 0.5s ease-in-out;
-ms-transition: opacity 0.5s ease-in-out;
transition: opacity 0.5s ease-in-out;
display:none;
}
div.effect img.hover{
opacity: 0;
-webkit-transition: opacity 0.5s ease-in-out;
-moz-transition: opacity 0.5s ease-in-out;
-o-transition: opacity 0.5s ease-in-out;
-ms-transition: opacity 0.5s ease-in-out;
transition: opacity 0.5s ease-in-out;
display:none;
}
div:hover.effect img.hover{
display:block;
opacity: 1;
-webkit-transition: opacity 0.5s ease-in-out;
-moz-transition: opacity 0.5s ease-in-out;
-o-transition: opacity 0.5s ease-in-out;
-ms-transition: opacity 0.5s ease-in-out;
transition: opacity 0.5s ease-in-out;
}
以下是使用的实时(不工作)演示:http://jsfiddle.net/46AKc/65/
答案 0 :(得分:1)
假设所有图像的高度相同,您可以在父元素上设置固定高度,然后相对定位它。
.effect {
position:relative;
height:94px;
}
绝对定位img
元素并移除display:none
。
div.effect img.image {
opacity: 1;
-webkit-transition: opacity 0.5s ease-in-out;
-moz-transition: opacity 0.5s ease-in-out;
-o-transition: opacity 0.5s ease-in-out;
-ms-transition: opacity 0.5s ease-in-out;
transition: opacity 0.5s ease-in-out;
position:absolute;
}
这样做的原因是因为子img
元素相对于父母绝对定位,有效地将两个图像定位在彼此之上。您不再需要更改元素的显示,从而允许进行转换。
或者,如果图像的高度不同,则省略高度,但仍然相对定位父元素。与绝对定位两个图像相反,只需定位一个,它仍然有效。
div.effect img.hover {
opacity: 0;
position:absolute;
top:0;
}
值得注意的是,如果它们具有相同的值,则不需要在所有元素上包含过渡属性。将它放在div.effect img.image
就足够了。
看看这个example。