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?

NickFitz · Accepted Answer · 2009-08-04 10:44:02Z

3

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?)

answered Aug 4, 2009 at 10:44

NickFitz

35.2k8 gold badges46 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Dimitar Christoff · Accepted Answer · 2009-08-05 13:21:42Z

1

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.

answered Aug 5, 2009 at 13:21

Dimitar Christoff

26.1k8 gold badges53 silver badges69 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related