Mouseover Color Effect

[ssskaya]

I am not sure if this is done with javascript, so please tell me the right place to post if not.

I have a navigation menu made up of regular text. I want to have mouseover color effect on the menu. (I want the text to change color when the cursor is on).

How do I do that?

Thanks a lot.

[smeagol]

You can do it like this:

Put the following inside your links <a> tags:

onmouseover="this.style.color='red'" onmouseout="this.style.color='black'"

Example:
<a href="http://www.google.com" onmouseover="this.style.color='red'" onmouseout="this.style.color='black'">Test Link</a>

[Roy Sinclair]

Yes, it can be done with javascript but it's much, much better done using CSS.


<style type="text/css">
a.menu {color: black;}
a.menu:hover { color: red; }
</style>

...

<a href="Menudestination.htm" class="menu">Menu Link</a>



Using CSS all you have to do is add class="menu" to each link instead of that long script, if you want different colors for different levels in your menu you can define a class for each level (menu1,menu2 instead of menu), you can also change the background color/image, font size/face/decoration etc pretty much the same way. Just make sure you define the normal version first and then the :hover version.

What's more, if you encounter a user with javascript disabled the CSS still works.

[smeagol]

Roy's right, it is much better to use CSS. Thanks for the tip Roy!