CODEWITHSUNDEEP
javascripthtmlcss
user818700
user818700

Reputation:

Manipulate innerHtml on onMouseOver()

I have a simple navigation bar that looks something like this:

<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>

So a very simple navigation. When a user hovers over one of the links I'd like to add squiggly brackets on either side of the link text as in:

Home {About Us} Prodcuts Contact Us

The way I thought is that I could do this in javascript, adding onClick="navAnimation('TheLinkName')" on each tag. Then in the JS I just get the innerHTML of the given link tag and add the squigglys on either side of the text.

Is this the best way to do it? It seems like quite alot of work for something so trivial..

Thanks!

Upvotes: 0

Views: 1581

Answers (3)

pliguori
pliguori

Reputation: 105

I guess the best way would be to handle the "onmouseover" event on the A or the LI element.

<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>

and the AddBrackets function would be something like:

function AddBrackets(x) {
    x.innerHTML = "{" + x.innerHTML + "}";
}

does it sound like what you wanted to do?

Upvotes: 1

Sowmya
Sowmya

Reputation: 26979

Use pseudo class 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

Upvotes: 0

elclanrs
elclanrs

Reputation: 94121

You can do this with just CSS, using pseudo elements:

ul.navigation a:hover:before { content: "{"; }
ul.navigation a:hover:after { content: "}"; }

Upvotes: 3

Related Questions