how to OnMouseOver change an element's class?

Hello,

I have the following:

<div class="site">
	<a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_excerpt(); ?></a>

	<div class="site_info">
           THIS RIGHT HERE!
	</div>

</div>

Code (markup):

I would like to know how to OnMouseOver on the SITE Div, how to change the className of SITE_INFO Div.

Any help on this matter would help greatly.

Be advised, there will be multiple of these Divs on the page at once, and I only want to change the SITE_INFO Div nested in the corresponding DIV being MouseOvered... I hope that made sense..

Thanks!

 

I figured it out. What I did was this:

<div class="site" onmouseover="this.className='site_active'; document.getElementById('post-<?php the_ID(); ?>').className='site_info_on'" onmouseout="this.className='site'; document.getElementById('post-<?php the_ID(); ?>').className='site_info'">
	<a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_excerpt(); ?></a>

	<div class="site_info" id="post-<?php the_ID(); ?>">
		<div class="site_info_left">
			<h2><a href="http://<?php $values = get_post_custom_values("Site_Url"); echo $values[0]; ?>"><?php $values = get_post_custom_values("Site_Name"); echo $values[0]; ?></a><small><BR><?php the_category(', ') ?></small></h2>
		</div>
		<div class="site_info_right">
			<center><h2><?php comments_popup_link('0', '1', '%'); ?></h2></center>
		</div>
	</div>

</div>

Code (markup):

I added the code to get the post-id dynamically (wordpress feature) and it changes that ID's information.

Thanks, and hopefully this helped out somebody.