[Javascript] Dom rollover

[Guillaume]

Hi JS community,

I'm trying to change the color of several pieces of text in tags ( h1, p 
and a ) contained in a div called #too when I mousover this div...
A rollover basically...
I thought switching node's classes contained inside #too...
It doesn't work... I can change the background-color, add a colored 
border... But the h1, p and a tags won't change their colors...

Anything obvious I'm missing below ?

Here's the concerned tree inside my page:

<div id="too">
<h1 class="tiToolsH">
+Tools
</h1>
<p class="toolsL">
<span class="AD">
<a href="#upUgo" id="shTools">Toolbar</a>
</span>
</p>
</div>

Here's the Js:

var oncL9 = document.getElementById('too');

oncL9.onmouseover = tooOv;

function tooOv() {

var el = document.getElementById('too');

if (el.hasChildNodes()) {

var nodels = el.childNodes;

for (var i = 0; i < nodels.length; i++) {

    nodels[i].className = 'tooOve';

        

        };

    };

}




And here's the Css:

.tooOve{

color: red;< This one doesn't work

background-color: black; < This one works

cursor: pointer;

}



So why can I not switch class of the child nodes inside #too to simply 
change the text color from grey to red ?

Guillaume