javascript - 在 onMouseOver() 上操作 innerHtml

Question

我有一个简单的导航栏，看起来像这样:

<ul class="navigation">
    <li><a href="index.html">Home</a></li>
    <li><a href="about.html">About Us</a></li>
    <li><a href="products.html">Products</a></li>
    <li><a href="contact.html">Contact Us</a></li>
</ul>

所以一个非常简单的导航。当用户将鼠标悬停在其中一个链接上时，我想在链接文本的任一侧添加波浪形括号，如下所示:

Home {About Us} Prodcuts Contact Us

我的想法是，我可以在 javascript 中执行此操作，在每个标签上添加 onClick="navAnimation('TheLinkName')"。然后在 JS 中，我只获取给定链接标记的 innerHTML，并在文本的任一侧添加波浪线。

这是最好的方法吗？对于如此微不足道的事情，似乎需要做很多工作..

谢谢!

Answer 1

你可以只用 CSS，使用伪元素来做到这一点:

ul.navigation a:hover:before { content: "{"; }
ul.navigation a:hover:after { content: "}"; }