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

【问题标题】：CSS - Maintaining hover state and delaying transitionsCSS - 保持悬停状态和延迟转换
【发布时间】：2013-01-14 10:36:01
【问题描述】：

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

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

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

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

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

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

【问题讨论】：

标签： css hover transition

【解决方案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;
}

【讨论】：

太棒了。轻松改变！谢谢你。当我悬停在.option-list ul li ul li a 上时，您知道如何保持.option-list ul li a 的悬停状态吗？
根据您的 DOM 规范，当您将鼠标悬停在菜单上时，您将不再悬停在 a 上，所以不，没有办法强制悬停。但是您仍然悬停在父 li 上！因此，使用它，将您的 .option-list ul li a:hover 规则（第 26 行）更改为 .option-list ul li:hover > a，以便您现在将 li 定位为悬停并定位其直接子锚，然后它将在悬停事件期间保持突出显示。 jsfiddle.net/WKfuW/4
非常感谢！很有魅力！