css - 菜单中的下划线过渡

Question

我有一个带有下划线的熔岩灯菜单，如下所示:

单击链接时，下划线会在链接之间滑动。试试 jsfiddle HERE .

我唯一的问题是，如果您在菜单外单击，下划线会恢复到原始状态 (18%)。但是当您在菜单外单击时，我希望下划线保留在最后单击的链接上。

我试过 :visited 但它什么也没做。

Answer 1

您实际上可以使用 :target 伪类通过纯 css 来完成此操作。

这是一个更新的 working fiddle

注意:您需要现代浏览器才能使用此方法。 (IE9+)

另外，看看 this article它显示了一些使用 css 模拟点击事件的巧妙方法(其中之一是 :target 伪类。