[Javascript] Dom rollover
Triche Osborne
wdlists at triche-osborne.com
Thu Sep 28 12:38:49 CDT 2006
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
>
>
More information about the Javascript
mailing list