Question

当您悬停图片时，我会显示一些div。但是，我希望有一个过渡而不是突然出现的图像。我试图尽可能避免使用javascript。

img {
display: none
}
p.one:hover + img {
display: block;
}
p.two:hover img {
display: block;
}

http://jsfiddle.net/nmeyf03r/56/

Answer 1

转换不适用于display: none。您无法淡入已从页面中删除的元素。同样，您无法淡出display: block元素。使用display，元素可以是in或out。

但是，您仍然可以使用visibility，opacity和height属性使用CSS转换div。

HTML

<p class="one">HOVER OVER ME - IMG IS SIBLING</p>
     <img src="http://www.placecage.com/100/100">
<p class="two">HOVER OVER ME -IMG IS CHILD</p>
    <img src="http://www.placecage.com/100/100">

CSS

img {
    visibility: hidden;
    opacity: 0;
    height: 0;
    transition: height .5s linear, opacity .5s linear;
}

p.one:hover + img {
    visibility: visible;
    opacity: 1;
    height: 100px;
    transition-delay: 0s;
}

p.two:hover + img {
    visibility: visible;
    opacity: 1;
    height: 100px;
    transition-delay: 0s;
}

这是您的演示，使用上面的代码进行更新：
http://jsfiddle.net/nmeyf03r/58/

如何将过渡应用于具有display：none的元素？

1 个答案: