Question

我试图在display：none之间进行平滑过渡;财产，然后相同的财产，但显示我猜我几乎想要它褪色？不使用JS。

我写过这个，当没有悬停在图像上时隐藏所有标题：

#title-0
{
display:none;
-o-transition:all 0.5s linear;
-ms-transition:all 0.5s linear;
-moz-transition:all 0.5s linear;
-webkit-transition:all 0.5s linear;
transition:all 0.5s linear;
}

我已经写了这个，显示了悬停时的标题：

#portfolio-0:hover > #title-0 {display:block;}

但悬停时的效果只是静态和即时

我感谢所有的帮助，谢谢！

Answer 1

你无法转换显示属性，如果我正确理解你想要实现的目标，可以使用不透明度来完成：

#title-0
{
opacity: 0;
-o-transition:opacity 0.5s linear;
-ms-transition:opacity 0.5s linear;
-moz-transition:opacity 0.5s linear;
-webkit-transition:opacity 0.5s linear;
transition:opacity 0.5s linear;
}

#portfolio-0:hover > #title-0 {display:block;}

Answer 2

您无法在显示属性上进行转换。您可以将#title-0的不透明度设置为0：

#title-0
{
    -o-transition:all 0.5s linear;
    -ms-transition:all 0.5s linear;
    -moz-transition:all 0.5s linear;
    -webkit-transition:all 0.5s linear;
    transition:all 0.5s linear;
    opacity: 0;
}

然后在1悬停时将不透明度恢复为#portfolio-0：

#portfolio-0:hover > #title-0 {opacity: 1}

<强> Fiddle Demo

Answer 3

以下是使用不透明度的工作示例。如果需要，还添加了高度转换：http://jsfiddle.net/Ty2nm/1/

#title-0 {
    height: 0;
    opacity: 0;
    -o-transition:all 0.5s linear;
    -ms-transition:all 0.5s linear;
    -moz-transition:all 0.5s linear;
    -webkit-transition:all 0.5s linear;
    transition:all 0.5s linear;
    overflow: hidden;
}
#portfolio-0:hover > #title-0 {
    height: 20px;
    opacity: 1;
}

将css过渡应用于ID？

3 个答案: