Change/Add CSS class to parent element on mouseover?

[draney]

I have a <div id="nav-left"> and I want a mouseover command that would add a class to that div, like this <div id="nav-left" class="magic">. It would work similar to this example:

<p onmouseover="this.style.color='red'" onmouseout="this.style.color='black'">Move the mouse pointer over this text to change its color. Move the pointer off the text to change the color back.</p>

Where that code refers to "this" I need to refer to the div element (see my actual HTML below). Also, that code adds an inline style and I would rather add a class, but I could live with adding an inline style for the background image position. I am trying to make the background image sprite for the div reposition when mousing over the links. Of course I want it to go back to normal on mouseout.

<div id="nav-left">
    <ul>
        <li><a id="btn-elves" href="#" title="Magic">Magic Elves</a></li>
        <li><a id="btn-new" href="#" title="New">New</a></li>
        <li><a id="btn-accessories" href="#" title="Accessories">Accessories</a></li>
    </ul>
</div>

[JKing]

	<div id="nav-left">
		<ul>
			<li><a id="btn-elves" href="#" title="Magic" onmouseover="getElementById('nav-left').className='magic'" onmouseout="getElementById('nav-left').className='notmagic'">Magic Elves</a></li>
			<li><a id="btn-new" href="#" title="New">New</a></li>
			<li><a id="btn-accessories" href="#" title="Accessories">Accessories</a></li>
		</ul>
	</div>

[draney]

	<div id="nav-left">
		<ul>
			<li><a id="btn-elves" href="#" title="Magic" onmouseover="getElementById('nav-left').className='magic'" onmouseout="getElementById('nav-left').className='notmagic'">Magic Elves</a></li>
			<li><a id="btn-new" href="#" title="New">New</a></li>
			<li><a id="btn-accessories" href="#" title="Accessories">Accessories</a></li>
		</ul>
	</div>

Thanks!! It is perfect.