Html 当鼠标悬停并单击时使用纯css制作活动菜单标记幻灯片？

我用伪元素创建了一个标记。我正在尝试使用

转换

为了达到滑动效果，但根本没有成功。。。我已经找了差不多一天的解决办法了。。非常感谢你的帮助。

---

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

这不可能仅通过转换实现。您有多个li，每个li都有一个：before元素。通过单击它们，您只需打开/关闭这些元素（它可能具有淡入淡出效果）。 你只需要一个边框（span或其他），当你点击li的边框时，它会将边框移到它下面。使用jQuery可以很容易地做到这一点（例如，当您单击第三个li时，span将向左移动->li.first width+li.second width+margins（如果有）。我不认为这只能通过css来实现

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

animateBorder();

---

更有趣的是：

这可能是一个良好的开端：

---

纯css

javalamp

当前设置将不起作用，因为红色的“标记”相对于每个父元素（在您的示例中是li.active）。动画只在同一元素和/或该元素的子元素上工作。感谢您的回答，如果您能推荐代码，我将尝试jquery。