How to use JavaScript to change div backgroundColor

Question

The HTML below:

<div id="category">    <div class="content">      <h2>some title here</h2>       <p>some content here</p>   </div>    <div class="content">      <h2>some title here</h2>       <p>some content here</p>   </div>    <div class="content">      <h2>some title here</h2>       <p>some content here</p>   </div>  </div> 

When mouseover the content of div then it's backgroundColor and the h2 (inside this div) backgroundColor change (just like the CSS: hover)

I know this can use CSS (: hover) to do this in modern browser but IE6 doesn't work.

How to use JavaScript (not jQuery or other JS framework) to do this?

Edit:how to change the h2 backgroundColor too

Answer 1

var div = document.getElementById( 'div_id' ); div.onmouseover = function() {   this.style.backgroundColor = 'green';   var h2s = this.getElementsByTagName( 'h2' );   h2s[0].style.backgroundColor = 'blue'; }; div.onmouseout = function() {   this.style.backgroundColor = 'transparent';   var h2s = this.getElementsByTagName( 'h2' );   h2s[0].style.backgroundColor = 'transparent'; };