css - 菜单中的下划线过渡

标签 css focus css-transitions

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

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

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

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

最佳答案

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

这是一个更新的 working fiddle

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

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

关于css - 菜单中的下划线过渡,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16522835/

相关文章:

javascript - CSS 菜单悬停下划线动画

javascript - 如何垂直居中模态?

Swift - 如何在使用软件键盘时使 UITextField 可见?

winapi - 为什么我的 Windows 应用程序按照规则不应获得焦点?

javascript - 过渡动画,高cpu?

html - CSS3 动画在 IE10 中不起作用

javascript - 数组更改时 CSS 转换丢失

css - 使用 ng-deep 在全局主题混合中使用主题颜色

javascript - AngularJS2 : How to focus input like document. getElementById(..).focus 在 javascript 中?

html - Safari 中的元素未正确对齐