[Javascript] Dom rollover

[davidh126 at writeme.com (David Hucklesby)]

> At 9/28/2006 09:39 AM, Guillaume wrote:
>> 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...
>
On Thu, 28 Sep 2006 11:26:58 -0700, Paul Novitski responded:
>
> In addition to what others have said:
>
> If the child elements don't change their color with their parent's
> color, my guess is that you've assigned them a background color in
> your stylesheet.  Background color is one of those properties that
> naturally "inherits" from parent to child.  Remove those child
> properties or assign them {background-color: inherit;}.
>
Umm. Not so. The background-color property is one of the few that
do *not* inherit. If unassigned, background-color defaults to 
transparent, allowing background colors and images set on enclosing
elements to show through. Think about it. A background image set on
the BODY appears in all places unless another background overlays it.

I see where you got the idea from though. It does *appear* to inherit
from enclosing elements.

The color property does inherit. But Guillaume may be having problems
with specificity. In your style sheet, Guillaume, if you are using
".tooOve" as your selector, try making it "#too .tooOve" instead.

To preserve existing classes on those children, you may prefer to
use "nodes[i].className += '  tooOve'" (notice the leading space).

Cordially,
David
--