CSS：图像悬停过渡不适用于显示无/显示：块和图像交换

Posted 2023-05-08

【中文标题】CSS：图像悬停过渡不适用于显示无/显示：块和图像交换

【英文标题】：CSS : Image hover transition not working with display none / display:block and image swap

【发布时间】：2014-04-14 08:09:02

【问题描述】：

我想为鼠标悬停添加一个简单的混合图像过渡。 悬停本身工作正常。 如果我删除 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/

【参考方案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 元素相对于父元素绝对定位，有效地将两个图像定位在彼此之上。您不再需要更改元素的显示，从而允许进行过渡。

UPDATED EXAMPLE HERE

---

或者，如果图像的高度不同，则省略高度，但仍相对定位父元素。与绝对定位两个图像相反，只需定位一个，它仍然可以工作。

ALTERNATIVE EXAMPLE HERE

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

还值得注意的是，如果所有元素的值相同，则不需要在所有元素上包含过渡属性。将它放在div.effect img.image 上就足够了。

看看这个example。

【讨论】：

您的解决方案完美无缺，我必须补充一点，它还改善了 iPad 上的体验，因为现在不需要预先选择链接（图像）。