Changing the text of multiple links with JavaScript (onMouseOver)

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, 开发者_StackOverflowby the way, I apologize for not having a live example, Im working on my LocalHost at the moment...

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

If you're willing to do jQuery then this would work: http://jsfiddle.net/MrrZs/ If not, I can try something else for you.