[Javascript] Dom rollover

[Triche Osborne]

Guillaume wrote:
> 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...
> 
Not sure of your purpose here, so if this is out of line, I apologize: 
Is there a reason not to use CSS's natural inheritance instead of trying 
to change each child node?

HTML:
<div class="off" id="too">
	<h1>Title</h1>
	<p>This is my <span>paragraph</span>.</p>
</div>

CSS:
div.off {
	border: 0;
	color: #000;
}
div.on {
	border: 2px solid #f00;
}
div.on h1 {
	color: #f00;
}
div.on span {
	color: #00f;
}

JS: Attach the mouseover/mouseout events to the parent DIV and CSS takes 
care of the rest.

Triche

> 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
> _______________________________________________
> Javascript mailing list
> Javascript at LaTech.edu
> https://lists.LaTech.edu/mailman/listinfo/javascript
> 
>