Создание нового определения для моего CSS с помощью JavaScript (и mootools, если необходимо). Проблема селекторов

Question

Я делаю некоторые div-ы кликабельными с помощью JavaScript. Я хотел бы использовать CSS, чтобы пользователь понял, что на них можно нажимать, например, изменение цвета ссылок внутри div, когда мышь входит в div.

В CSS это:

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

и это работает как шарм.

Мне бы хотелось, чтобы цвет ссылки изменялся при наведении курсора мыши, только если JavaScrpt включен, потому что если он отключен, div не активируется, просто ссылка Я хотел бы добавить это объявление с javascript, то, что в mootools должно быть так просто, как:

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

Но этот селектор не работает с mootools. Я должен пойти на each div детей #menu и addEvents к нему. Это кажется слишком большой работой для меня по сравнению с простым определением CSS. Как я могу это сделать?

Альтернативное решение (которое я не знаю, как реализовать) могло бы написать with_js_enabled.css для загрузки через javascript. Возможно ли это?

Answer 1

Намного проще: установить класс для элемента body при загрузке страницы:

document.body.className = "js";

Затем измените свой CSS;

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

Работа сделана: -)

(хотя я предполагаю, что вы знаете, что IE 6 не поддерживает: зависать ни на чем, кроме ссылок?)

Answer 2

ну, так как вы спросили о mootools здесь ...

чтобы изменить цвета всех A внутри div'ов #menu при наведении курсора на div, можно определить класс 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");
        }
    });
});

Вы также можете перейти к $ ("menu"). GetElements ("div"). GetElements ("a") или даже $ ("menu"). GetElements ("a"), а затем прикрепить события к родительскому элементу. (если это будет div) - я думаю, это действительно не имеет значения.