Roll over link == change class. Roll out of div == change class back. Not working. Help

That's my issue in its simplest terms. Let me try to clear it up.

I have a div, in this case called "testdiv", which has a class name of "menulink" attached to it. There is a link inside of the div. When I roll over the link, I want the di开发者_开发技巧v class to change to "menulinkHover". When I roll out of the div, however, I want the class to revert back to "menulink". To do this, I am using getElementByID. Rolling over the link works perfectly, but as soon as I roll out of the link, not the div, the class reverts back.

Here is a fiddle with what I have so far: http://jsfiddle.net/nathanbunn/KJMsf/

I'm working on this with jQuery, using .removeClass and .addClass in the same manner, but I fear I will get the same issue. I've missed something, I know I've missed something, but what is it? For an idea of what I'm looking for, have a look on the Harvey Nichols homepage. I know they use Prototype for their framework of choice.

Can this be done with the script I have? Am I right and I have indeed missed something? Can it work better in jQuery? Can it be done in pure CSS, even? Please help. I'm at a complete loss.

Combine CSS with jquery mouse event and fadein/out, and you should get what you want. An example is : here

I set it up to use JQuery as I always find it better than pure javascript. I got it to work by setting the link to have a mouseenter that adds a class to the div and then the div itself has a mouseleave that removes the class. It now works fine for me. Here's the link: http://jsfiddle.net/KJMsf/6/