使用 JavaScript 更改多个链接的文本 (onMouseOver)
我有多个链接,每个链接都嵌入在自己的列表项中,如下所示:
<ul id="topLinks">
<li><a href="#">Link 1</a></li>
...
<li><a href="#">Link 4</a></li>
</ul>
我想要做的是,当用户将鼠标悬停在链接上时,破折号将添加到链接文本中。例如,当鼠标滑过“Link 1”时,它会变成“-Link 1-”,当光标不再位于该链接上时,它会恢复正常 - 保留其他链接(直到用户将光标滑过)每个相应的链接)。
我已经尝试为此编写一些自己的脚本,但我对 JavaScript 还很陌生,所以我有点迷失了。哦,顺便说一句,我很抱歉没有一个活生生的例子,我现在正在我的 LocalHost 上工作......
I have multiple links, each embedded in its own list-item, like so:
<ul id="topLinks">
<li><a href="#">Link 1</a></li>
...
<li><a href="#">Link 4</a></li>
</ul>
What I would like done is, when the user is hovering over the link, dashes are added to the link text. For example, when the mouse rolls over "Link 1", it turns to "-Link 1-", and goes back to normal when the cursor is not over that link anymore - leaving the other links alone (until user rolls its cursor over each respective link).
I've tried writing a few scripts of my own for it, but Im still pretty new to JavaScript, so Im kind of lost. Oh, by the way, I apologize for not having a live example, Im working on my LocalHost at the moment...
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
事实上,您可以将
:after
和:before
CSS 选择器与:hover
结合使用: http://jsfiddle.net/pimvdb/p9Qfu/。它比使用 JavaScript 更直接、更快速。In fact, you can use
:after
and:before
CSS selectors, in combination with:hover
: http://jsfiddle.net/pimvdb/p9Qfu/. It is more straightforward and faster than doing it in JavaScript.如果你愿意使用 jQuery 那么这会起作用: http://jsfiddle.net/MrrZs/ 如果不,我可以为你尝试别的东西。
If you're willing to do jQuery then this would work: http://jsfiddle.net/MrrZs/ If not, I can try something else for you.