onMouseOver="this.className"

Hi,

I’m looking for a way to do this as easily as possible:
I would like to switch the class “.top-bar” to be “.top-bar-green” on this green text mouseover:

<A HREF=""onMouseOver="this.className='top-bar-green';">Green</a>

This changes the anchor text itself, but I need the “top-bar” class to be changed.

Hope this makes sense!
Thanks!

I am quite confused what you exactly want. The code you have used should change the class name from something to ‘top-bar-green’.


	<style type="text/css">
		.top-bar{
			color: black;
		}
		.top-bar-green{
			color: green;
		}
	</style>
	<a href="" class="top-bar" onmouseover="this.className='top-bar-green';" onmouseout="this.className='top-bar';">Green</a> 

This works for me to change the class of <a> to top-bar-green onmouseover and back to top-bar onmouse out events. What do you want to do more here?

Hi rajug,
Thanks for the reply.
I do not wish to apply the “top-bar-green” class to the anchor text itself, but rather another div at a completely different region of the page. That’s why I don’t think “this.className” will work. Instead I will need to call “top-bar.className” but I’m not sure what the code is exactly :stuck_out_tongue:

Ok then try something like this:


<style type="text/css">
		.top-bar{
			color: black;
		}
		.top-bar-green{
			color: green;
		}
	</style>
	<a href="" class="top-bar" onmouseover="document.getElementById('mydiv').className='top-bar-green';" onmouseout="this.className='top-bar';">Green</a>
	<div id="mydiv">asdfasd</div> 

Awesome! Thanks alot :slight_smile:
It’s working now