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:"{" }

<强> DEMO

在onMouseOver（）上操作innerHtml

3 个答案: