带有可折叠单个项目的边栏

Question

我有一个标准的HTML列表，其中包含一些菜单项，这些菜单项将作为指向长滚动页面各个部分的锚链接。我想把它格式化为一个最小的垂直侧导航栏，每个项目最初只显示一个小的彩色圆圈(但没有文本——有点像红绿灯，但都是相同的颜色(，然后当用户悬停在每个圆圈上时，该项目的全文就会弹出到旁边。我不能直接访问HTML，因为它是由第三方工具生成的，但如果需要，可以使用Javascript访问DOM。

我开始使用的代码看起来像：

<ul id="navigation">
<li><a href="#link1">Link1</a></li>
<li><a href="#link2">Link2</a></li>
<li><a href="#link3">Link3</a></li>
</ul>

我可以找到很多整个侧板弹出的例子，但不仅仅是单个项目。我的主要问题是，我不知道如何描述它来搜索更多信息，所以任何建议或建议都是受欢迎的。感谢

Answer 1

可能如下所示：

a {
opacity: 0;
transform: translateX(-100%);
transition: all .3s ease;
display: inline-block;
}
li:hover a {
transform: translateX(0);
opacity: 1;
}

<ul id="navigation">
<li><a href="#link1">Link1</a></li>
<li><a href="#link2">Link2</a></li>
<li><a href="#link3">Link3</a></li>
</ul>