Changing "Nested" CSS Styles using Javascript

Hello, I am an occasional lurker here, but I've decided to register and ask a question to the experts since I am stuck. Here's my situation:

I want to change the background (and text) of a rollover based on css styles.

Here is a snippet of my CSS:


#navcontainer ul
{
padding: .3em 0;
margin: 0;
list-style-type: none;
background-color: rgb(205,219,205);
color: #FFF;
width: 100%;
font: normal 90% arial, helvetica, sans-serif;
text-align: center;
}

#navcontainer li { display: inline; }

#navcontainer li a
{
text-decoration: none;
background-color: #92847B;
color: #FFFFFF;
padding: .3em 1em;
border-right: 1px solid #fff;
border-left: 1px solid #fff;
}

#navcontainer li a:hover
{
background-color: rgb(205,219,205);
color: #000000;
border-right: 1px solid #000;
border-left: 1px solid #000;
}

Using the following code I can change the #navcontainer background colors, but can anyone give advice on how to change the #navcontainer li a:hover background color?

function changeProp(elementId, property, val) {
if (document.getElementsByTagName) {
var element = document.getElementById(elementId);
element.style[property] = val;
}
}


Thank you for any help you can provide!!!

Why do you want to change an element's :hover style with JavaScript?

http://www.quirksmode.org/dom/changess.html

I know it's odd, I run a website where users can signup and get a little personalized website that is built off of a basica template. My goal is to allow users to fully customize their webpages. I am creating a bare bones online css editor that allows them to change colors, positions, etc, then a custom .css will be created for their site.

Within this tool I want them to be able to preview their site in real time. So, when they pick a different :hover color, it will update the preview so they can see what it looks like. This might not be possible and I may just have to post back to the server and recreate a preview page, or use ajax or something, but I'd like to do it through javascript if possible.

The more I research this the more I see it's not really possible. I can easily change background colors on a normal style, but it's the nested ones that are causing problems?

Any advice?

Who calls those "nested?

Take a look at the link I posted.

What do you call them?
I call them nested. They are nested within other CSS tags.

-navcontainer
--ul
--li
---a

the a:hover only applies to the li element, hence it's nested, but anyways, I'm not up to date on the proper lingo.

I looked at the link, and what I'm seeing is that if you don't know the location of the tag you want, you're out of luck.

This code seems to be my best option as I can hopefully get the rules, look for something that matches what I expect and change it that way.

var theRules = new Array();
if (document.styleSheets[1].cssRules)
theRules = document.styleSheets[1].cssRules
else if (document.styleSheets[1].rules)
theRules = document.styleSheets[1].rules

I think this should work, from my code above you can see that I was going in the wrong direction, I was trying to change DHTML element properties , not CSS element properties.

What do you call them?
I call them nested. They are nested within other CSS tags.

-navcontainer
--ul
--li
---a

the a:hover only applies to the li element, hence it's nested, but anyways, I'm not up to date on the proper lingo.
It's the X/HTML elements that are nested, not the CSS code. I'm not aware of a term for it.

I looked at the link, and what I'm seeing is that if you don't know the location of the tag you want, you're out of luck.

This code seems to be my best option as I can hopefully get the rules, look for something that matches what I expect and change it that way.
Yeah, unfortunately the way it was designed makes it difficult to use.

I think this should work, from my code above you can see that I was going in the wrong direction, I was trying to change DHTML element properties , not CSS element properties.
"DHTML element"? DHTML is nothing more than a term referring to X/HTML documents styled with CSS and given some added behavior with JavaScript.

What you were doing was changing the inline styles of the elements, which is not what you really wanted to do.