Question

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

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

我想尝试在纯CSS中尽可能多地做。

有人可以给我任何指导吗？我希望我已经解释得很好。

JS小提琴：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;
}

CSS - 维护悬停状态并延迟转换

1 个答案: