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>

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

首页 {关于我们} 产品展示 联系我们

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

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

谢谢！

Answer 1

您可以使用伪元素仅使用 CSS 执行此操作：

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

Answer 2

我想最好的方法是处理 A 或 LI 元素上的“onmouseover”事件。

<ul class="navigation">
    <li><a onmouseover="AddBrackets(this);" href="index.html">Home</a></li>
    <li><a onmouseover="AddBrackets(this); href="about.html">About Us</a></li>
    <li><a onmouseover="AddBrackets(this); href="products.html">Products</a></li>
    <li><a onmouseover="AddBrackets(this); href="contact.html">Contact Us</a></li>
</ul>

AddBrackets 函数类似于：

function AddBrackets(x) {
    x.innerHTML = "{" + x.innerHTML + "}";
}

听起来像你想做的吗？

Answer 3

使用pseudo类after and before

CSS

ul li{display:inline; padding:2px 6px; color:green; text-align:center}
ul li a{display:inline; color:green; width:100px; text-decoration:none; display:inline-block}
ul li a:hover:after{ content:"}" }
ul li a:hover:before{ content:"{" }

​<strong> DEMO