0

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

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

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

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

JS 小提琴在这里：http: //jsfiddle.net/WKfuW/1/

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

4

1 回答 1

4

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;
}
于 2013-01-30T15:07:32.370 回答