子元素悬停时的Css转换

当其父元素悬停在上方时，我试图暂停子元素的显示

Html:

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

在这里拉小提琴：

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

解决

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

Html:

在此处拨弄：

根据由引用的on CSS转换，

display

属性不是可以转换的：

有几个属性或值需要转换，但在编写本文时，这些属性或值均未加密且不受支持：

• 背景图像

  ，包括渐变

• 在“无”和任何其他内容之间显示

因此，应用

转换：显示5sdiv

的code>属性无效

编辑：

根据更新的代码，只要不指定

显示

属性，就可以通过不透明度和宽度实现所需的效果。只需删除该行

display: none;

从

span div

部分，当您将鼠标悬停在弹出菜单上时，弹出菜单将使用您指定的转换

---

自<代码>显示转换后：无到

显示：内联块

无法设置动画，此属性可能仅在转换结束时更改-因此当

div

仍然不可见时，不透明度会设置动画。

是否尝试使用

-webkit transition delay:？如果不是，这可能是你正在寻找的东西

代码中是否做了一些更改：

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

}

}​

这是一个
为什么不换个方式呢
这是DIV中的ChildSome文本
。。。它在语义上更为正确。对于GM脚本，跨度是由GM脚本修改的站点创建的。我想为显示的span创建一个悬停菜单jQuery/JS是唯一的解决方案吗？好吧，我已经更新了小提琴，使其混合使用不透明度和宽度过渡，但仍然不起作用。您可能想更新您的问题，将代码包含在更新的小提琴中。@Edward I；至少是这样。我认为没有理由在问题的代码块中添加不相关的样式@回答好，我更新了我的答案。（不确定我编辑时是否会提醒您，因为这不算“新答案”）。
<span>
    <div>This Is The Child</div>
    Some Text in the span
</span>

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;
}​

display: none;

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;