Question

我试图在父元素悬停时暂停显示子元素。

HTML：

<span>
    <div>This Is The Child</div>
    Some Text in the span
</span>

的CSS：

span { 
    position: relative; 
}
span div { 
    display: none;
    width: 0px;
    opacity: 0;

    transition: width 5s;
    -webkit-transition: width 5s;

    transition: opacity 5s;
    -webkit-transition: opacity 5s;
}
span:hover div {
    display: inline-block;
    width: 150px;
    opacity: 1;
}

截至目前，当跨度悬停时，div在显示之前没有延迟。我该如何修复它以便暂停？

在这里小提琴：http://jsfiddle.net/SReject/vmvdK/

一些注意事项：
我最初试图过渡显示器，但正如爱德华指出的那样，这是不可能的，并且有意义尝试了以上哪些，也没有工作

解决

似乎“过渡到”样式中的任何“显示”属性都将阻止任何过渡动画的发生。解决这个问题。我将要显示的子项的宽度设置为0px并使其完全透明。然后在“过渡到”样式中，我设置了正确的宽度，并使div固定：

HTML：

<span>
    <div>This Is The Child</div>
    Some Text in the span
</span>

的CSS：

span { 
    position: relative; 
}
span div { 
    position: absolute;

    width: 0px;
    opacity: 0;
    transition: opacity 5s;
    -webkit-transition: opacity 5s;
}
span:hover div {
    width: 150px;
    opacity: 1;
}

在这里小提琴：http://jsfiddle.net/SReject/vmvdK/

Answer 1

根据this article引用的MDN page on CSS transitions {{3}}，display属性不是可转换的属性：

您需要转换几个属性或值，但在撰写本文时，这些属性或值都未被指定和不受支持：


background-image，包括渐变

...

display介于none和其他任何内容之间

因此，将transition: display 5s;属性应用于div无效。

编辑：

根据您更新的代码，只要您未指定display属性，就可以通过不透明度和宽度实现所需的效果。只需删除

行

display: none;

来自span div部分的

，弹出式菜单将使用您将鼠标悬停在其上时指定的转场。

由于无法动画从display:none;到display:inline-block的转换，因此此属性可能仅在转换结束时更改 - 因此在div仍然是{{1}}时不透明度会变为动画不可见的。

Answer 2

您是否尝试过使用-webkit-transition-delay: ;？如果没有，这可能是您正在寻找的东西？

代码中有一些更改：

span div { 
position: absolute;
left: 5px;
top: 5px;
border: 1px solid #000;
background-color: #888;
width: 0px;
opacity: 0;
cursor: pointer;

}

span:hover div {
display: inline-block;
-webkit-transition-delay: 2s;
width: 150px;            
opacity: 1;

}

这是一个demo

用于子元素的悬停时的Css转换

2 个答案: