Change the CSS class of a span element on mouseover of another element

Question

I am trying to change the css class of a span element when another element is hovered over. The get an idea of what I mean. Load up your Facebook and hover over the main newsfeed posts and in the top right the little down-arrow appears.

That is the effect that I want to create. So far I have:

<li id="unique" class="message"><a href="javascript:void(0)" onMouseOver="(MC.className='messageControls')" onMouseOut="(MC.className='hidden')" onclick="callTheFunction();"></li>

<span id="MC" class="hidden">hksdjhkjsdhfkjhsdkjh</span>

But this doesn't work. Any pointers? I don't want to use any frameworks/libraries such as jQuery.

Answer 1

Your on.. event handlers have no concept of what MC is. Try like this:

... onMouseOver="document.getElementById('MC').className='messageControls'" ...

This way you "look up" the element with the id attribute whose value is MC , then act on that element. And as a remdinder, elements must have unique IDs.