子元素的鼠标悬停CSS过渡效果

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

目前，当光标悬停在span上时，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/

- SReject

---

为什么不用另一种方式 <div><span>This Is The Child</span>Some Text in the DIV</div>？这样更符合语义学的正确性。 - JFK

这是一个GM脚本，span由GM脚本修改的站点创建。我想为显示的span创建一个悬停菜单。 - SReject

Answer 1

根据CSS转换中这篇文章的说明（在CSS转换的MDN页面上引用），display属性不是可以过渡的属性之一：

有几个属性或值您可能需要过渡，但在撰写本文时还未经过规范和支持：

• background-image，包括渐变
• ...
• display在none和其他任何状态之间切换

因此，将transition:display 5s;属性应用于您的div没有效果。

编辑：

根据您更新后的代码，只要不指定display属性，就可以使用不透明度和宽度实现您想要的效果。只需删除该行即可。

display: none;

从 span div 部分开始，弹出菜单会在鼠标悬停时使用您指定的过渡效果。

由于从 display:none; 到 display:inline-block 的转换无法进行动画处理，因此该属性可能仅在过渡结束时才会更改 - 因此在 div 仍处于不可见状态时，不透明度会发生动画效果。

- Edward

---

@Edward 我做到了，至少是最低限度。我认为在问题的代码块中加入无关的样式没有意义。 :) - SReject

@SReject 好的，我更新了我的答案。（不确定当我进行编辑时是否会通知您，因为它不算作“新答案”）。 - Edward

我在看到你的评论之前就解决了这个问题，但我还是很感谢你花时间回复 :) - SReject

@SReject 太好了！如果您想回答自己的问题，在StackOverflow上正确的格式是发布一个答案（您可以在自己的问题上单击“回答”按钮），并将原始帖子保留为问题。然后，您可以单击“接受”来接受自己的答案。 - Edward

不应该将块级元素包裹在内联元素中（span>div）。这是无效的。 - Rápli András

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;

}​

这里还有一个演示

- Christofer Vilander