gpt4 book ai didi

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

转载 作者:太空宇宙 更新时间:2023-11-03 21:54:54 25 4
gpt4 key购买 nike

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

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

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

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

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

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

最佳答案

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 - 保持悬停状态和延迟转换,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14606932/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com