悬停时使活动菜单标记滑动并使用纯CSS进行单击？

Question

我有一个用伪元素创建的标记。我试图使用transitions  实现滑动效果但完全没有成功......我一直在寻找解决方案近一天......我们将非常感谢您的帮助。 Fiddle here

我添加了一个jquery只是为了移动活动链接，但我的实际代码根本没有使用jquery。也许有一种方法可以使用纯css实现滑动效果。

Answer 1

这可能是一个很好的开始：FIDDLE.

纯css javalamp。

Answer 2

仅使用转换无法进行此操作。你有多个li，每个都有一个：before元素。通过单击它们，您只需打开/关闭这些元素（它可能具有淡入淡出效果）。 你需要的只是一个边界（跨度或其他），当你点击它时，它会移动它下面的边界。可以使用jQuery轻松完成（例如，当您单击第三个li时，span将向左移动 - > li.first width + li.second width + margin（如果有））。我不认为这只能用css来完成。

试试这个：JSFIDDLE我创建了函数：

animateBorder();

让它变得更有趣：JSFIDDLE - 2