Question

当用户在项目上悬停时，是否可以仅使用CSS扩展项目，并保持这种方式直到用户将鼠标悬停在另一项目上？

我尝试过转换，它会展开并保持打开或展开和关闭，但不会展开，等待其他操作，然后重新关闭项目。

<html>
    <ul id="menu">
      <li>Coffee</li>
      <li>Tea</li>
      <li>Milk</li>
    </ul>
</html>

#menu {
    font-size: 0px;
    line-height: 10px;
    background: #eee;
}

#menu li{
    font-size: 0px;
    line-height: 10px;
    transition:0s 180s;
}

#menu li:hover {
    font-size: 10px;
    line-height: 12px;
    transition:0s;
}

#menu ul:hover {
    font-size: 0px;
    line-height: 12px;
    transition:0s;
}

Answer 1

:hover伪类适用于指针在元素上的持续时间。

如果用户离开该元素，则他们不再悬停它。所以，简短的回答是不。

您可以使用动画来延迟效果。即使在光标离开后，您也可以在其上放置动画，而不是实际保持元素可见，这只会在关闭之前添加延迟。

如果您将动画同时应用于悬停状态和正常状态，则可能有所帮助。但是，如果您的悬停效果正在从display:none更改为display:block，则由于display无法动画，因此您无法获得任何帮助。您需要使用visibility或height之类的内容。

CSS保持悬停项目打开，直到另一个项目悬停在上面

1 个答案: