CODEWITHSUNDEEP
javascriptonmouseover
jsNewb
jsNewb

Reputation: 1

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

Upvotes: 0

Views: 202

Answers (2)

ayyp
ayyp

Reputation: 6608

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

Upvotes: 0

pimvdb
pimvdb

Reputation: 154908

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

Upvotes: 1

Related Questions