Creating new definition for my CSS with JavaScript (and mootools if needed). Selectors problem.

Question

I'm making some divs clickable with JavaScript. I'd like to use CSS to make the user understand that they are clickable, for example changing the color of links inside a div when mouse enters the div.

In CSS it is:

#menu > div:hover > a {
    color: #f00;
}

and it works like a charm.

I'd like the color of the link to change when you mouseover only if JavaScrpt is Enabled, because if it is disabled the div is not clickable, just the link is. I'd like to add this declaration with javascript, something that in mootools should be as simple as:

$$('#menu > div:hover > a').setStyle('color', '#f00');

But that selector doesn't work on mootools. I should go for each div children of #menu and addEvents to it. That seems too much work for me compared to the simple css definition. How can I do that?

Alternative solution (that I don't know how to implement) could be write a with_js_enabled.css to load trough javascript. Is it possible?

Answer 1

Much simpler: set a class on the body element on page load:

document.body.className = "js";

Then modify your CSS;

.js #menu > div:hover > a {
    color: #f00;
}

Job done :-)

(Although I assume you're aware that IE 6 doesn't support :hover on anything but links?)

Answer 2

well, since you asked about mootools here...

to change the colours of all A's within the divs of #menu when mouseover is triggered on the div, you could define a class a.red { color: red; }

$("menu").getElements("div").each(function(el) {
    el.addEvents({
        mouseenter: function() {
            this.getElements("a").addClass("red");
        },
        mouseleave: function() {
            this.getElements("a").removeClass("red");
        }
    });
});

you could also go $("menu").getElements("div").getElements("a") or even $("menu").getElements("a"), then attach the events to the parent (if it happens to be the div) - i guess it really does not matter.