我可以使用：hover触发一个CSS3动画（或转换），即使当鼠标不再悬停时，它仍然运行 [英] Can I use :hover to trigger a CSS3 animation (or transition) which keeps running even when the mouse is no longer hovering

问题描述

我正在创建一个链接列表，其中一个链接容器在悬停（包括详细信息，图片和说明）时展开。我没有问题，动画它与CSS过渡或动画。

I'm creating a link list where one link container expands when hovering it ( with details, image and description). I have no problems to animate it with css transitions or animations.

问题是，我想它保持扩展，即使鼠标移开后。
我想做没有javascript的。

The problem is that I would like it to stay expanded even after the mouse moves away. And I would like to do it without javascript.

有可能吗？感谢！

推荐答案

而不是使用：hover你可以使用：target pseudo class。

Instead of using :hover you could do this using The :target pseudo class.

查看此 小提示

Check out this fiddle

注意：您需要使用现代浏览器才能使用此方法。 （IE9 +）

Note: You'll need a modern browser to use this method. (IE9+)

另请参阅这篇文章，它显示了一些聪明的方法来模拟css的点击事件（其中之一是：target伪类。

Also, take a look at this article which shows some clever ways to simulate click events with css (one of them being the :target pseudo class.

这篇关于我可以使用：hover触发一个CSS3动画（或转换），即使当鼠标不再悬停时，它仍然运行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！