CSS：图像悬停转换不工作与显示无/显示：块和图像交换 [英] CSS : Image hover transition not working with display none / display:block and image swap

问题描述

我想为鼠标悬停添加一个简单的混合图像转换。
悬停本身工作正常。
如果我删除了显示：none，则转换将工作，但悬停图像交换将分离。任何想法如何解决这个问题？

I want to add a simple blend-in image transition for mouse hover. The hover itself works fine. If I remove the display:none , the transition will work, but the hover image swap will fall apart. Any ideas how to fix that ?

这是我使用的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;
}

这里是现场演示href =http://jsfiddle.net/46AKc/65/ =nofollow> http://jsfiddle.net/46AKc/65/

And here is the live (not working) demo to play with: http://jsfiddle.net/46AKc/65/

推荐答案

假设所有图片的高度相同，您可以在父元素上设置固定高度，然后相对定位。

Assuming all the images are the same height, you could set a fixed height on the parent element and then relatively position it.

.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 元素相对于父对象是绝对定位的，有效地将两个图像定位在彼此的顶部。您不再需要更改元素的显示，从而允许发生转换。

The reason this works is because the child img elements are absolutely positioned relative to the parents, effectively positioning both images on top of each other. You no longer need to change the display of the element, thus allowing the transition to take place.

图像的高度不一样，省略高度，但仍然相对定位父元素。

Alternatively, if the images aren't all the same height, omit the height, but still relatively position the parent element. As opposed to absolutely positioning both images, just position one and it will still work.

此处的备用示例

div.effect img.hover {
    opacity: 0;
    position:absolute;
    top:0;
}

这也值得注意，你不需要包括过渡属性所有元素（如果它们具有相同的值）。将它放在 div.effect img.image 就足够了。

It's also worth noting that you don't need to include the transition properties on all the elements if they have the same values. Having it on the div.effect img.image will suffice.

看看这个示例。

这篇关于CSS：图像悬停转换不工作与显示无/显示：块和图像交换的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！