0

当用户悬停在一个项目上时，是否可以仅使用 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;
}
4

1 回答 1

0

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

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

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

如果您将动画应用于悬停状态和正常状态，这可能会有所帮助。但是，如果您的悬停效果正在从 更改display:none为display:block，您将无法获得任何帮助，因为display它不是可动画的。您需要使用类似的东西visibilityor height。

于 2014-11-24T17:23:53.110 回答