html - 如何将转换应用到显示为 :none? 的元素

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，元素要么在里面，要么在外面。

但是，您仍然可以使用 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/