css - 我可以使用 :hover to trigger a CSS3 animation (or transition) which keeps running even when the mouse is no longer hovering 吗

Question

我正在创建一个链接列表，其中一个链接容器在悬停时展开(包含详细信息、图像和描述)。我可以毫无问题地使用 css 过渡或动画对其进行动画处理。

问题是我希望它即使在鼠标移开后也能保持展开状态。我想在没有 javascript 的情况下做到这一点。

这可能吗？谢谢!

Answer 1

不，这是不可能的，因为将在鼠标悬停时应用的每个 css (:hover) 都将在鼠标悬停时被删除，并且没有其他方法可以捕获鼠标悬停和鼠标悬停。

#animate:hover {
    /* ex. -webkit- -moz- -ms- -o-​ */ animation: animation 2s infinite; /* will be directly aborted on mouseout :( */
}

所以你应该为此使用 JavaScript。