使用 JavaScript 更改多个链接的文本 (onMouseOver)

发布于 2024-11-28 21:55:22 字数 455 浏览 2 评论 0原文

我有多个链接,每个链接都嵌入在自己的列表项中,如下所示:

<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 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

來不及說愛妳 2024-12-05 21:55:22

事实上,您可以将 :after:before CSS 选择器与 :hover 结合使用: http://jsfiddle.net/pimvdb/p9Qfu/。它比使用 JavaScript 更直接、更快速。

li:hover:before {
    content: "-";
}

li:hover:after {
    content: "-";
}

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.

li:hover:before {
    content: "-";
}

li:hover:after {
    content: "-";
}
桃扇骨 2024-12-05 21:55:22

如果你愿意使用 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.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文