CSS - 保持悬停状态和延迟转换

Question

我正在尝试在 <a> 上创建过渡效果列表中的标记，这将显示嵌套列表。这很好，除了我希望它与 <a> 上的过渡效果一致，持续 0.5 秒。尽管尝试了过渡延迟，但它似乎总是立即过渡。基本上，我希望在嵌套列表出现之前有 0.5 秒的延迟。

我还想要它，以便当用户将鼠标悬停在嵌套列表中的元素上时，<a>元素仍然保持它的悬停状态。这可能吗？

我想尝试尽可能多地使用纯 CSS。

有人可以给我任何指导吗？我希望我已经解释得够清楚了。

JS Fiddle 在这里:http://jsfiddle.net/WKfuW/1/

请原谅奇怪的字符 - 我使用 @font-face 作为图标。

Answer 1

http://jsfiddle.net/WKfuW/2/

我能够通过不过渡显示而不是过渡不透明度来实现您想要的目标。显示是一个开关——它可以打开或关闭。但不透明度是一个范围，从 0 到 1。因此，通过使用它，我能够延迟它、淡化它，并反向执行相同的操作。

有用的 CSS 是:

.option-list ul li ul
{
    display: block;
    opacity: 0;

    transition:opacity 0.5s ease 0.5s;
}

.option-list ul li:hover ul {
    opacity: 1;

    transition: opacity 0.5s ease 0.5s;
}