子元素悬停时的CSS转换答案

【问题标题】：Css Transition on hover for child element子元素悬停时的CSS转换
【发布时间】：2012-07-14 21:25:46
【问题描述】：

当父元素悬停时，我试图暂停子元素的显示。

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/

一些注意事项：
我最初试图转换显示，但正如 Edward 指出的那样，这是不可能的，并且已经尝试过上述方法，但也不起作用

已解决

看起来“过渡到”样式中的任何“显示”属性都会阻止任何过渡动画的发生。要解决这个问题。我将要显示的孩子的宽度设置为 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/

【问题讨论】：

为什么不反过来<div><span>This Is The Child</span>Some Text in the DIV</div>？ ...它在语义上更正确。
这是一个GM脚本，span由GM脚本修改的站点创建。我想为显示的跨度创建一个悬停菜单

标签： css parent-child css-transitions

【解决方案1】：

根据 MDN page on CSS transitions 引用的 CSS 过渡上的 this article，display 属性不是可以过渡的：

您需要转换几个属性或值，但在撰写本文时它们既未指定也不支持：

background-image，包括渐变

...

display 介于两者之间

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

编辑：

根据你更新的代码，只要不指定display属性，就可以通过不透明度和宽度达到你想要的效果。只需删除该行

display: none;

来自span div 部分，当您将鼠标悬停在弹出菜单上时，弹出菜单将使用您指定的过渡。

由于从display:none; 到display:inline-block 的过渡无法动画化，因此该属性可能仅在过渡结束时更改 - 因此不透明度会动画化，而div 仍然不可见。

【讨论】：

jQuery/JS 是唯一的解决方案？
好吧，我已经更新了小提琴以混合使用不透明度和宽度过渡，但它仍然无法正常工作
您可能想要更新您的问题以将代码包含在您更新的小提琴中。
@Edward 我做到了；至少是最低限度。我认为没有理由将不相关的样式放在问题的代码块中。 :)
@SReject 好的，我更新了我的答案。（不确定它是否会在我进行编辑时提醒您，因为它不算作“新答案”）。

【解决方案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

【讨论】：