我想为鼠标悬停添加一个简单的混合图像过渡。 悬停本身工作正常。 如果我删除 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/
最佳答案
假设所有图片的高度都一样,你可以在父元素上设置一个固定的高度,然后相对定位。
.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 .
关于CSS : Image hover transition not working with display none/display:block and image swap,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22313438/