Изменение стиля: селектор наведения в mootools

Question

Я пробовал гугл, но не могу однозначно ответить.

Я пытаюсь отредактировать стили #sidebar: hover из mootools. Мой css выглядит следующим образом:

#hoverzone:hover {
    background: #EEE;
}

Теперь я пытаюсь отредактировать цвет фона из mootools при загрузке страницы, чтобы показать, что JavaScript включен. Я знаю, что могу сделать:

$('hoverzone').addEvent('mouseenter', function(){
    this.setStyle('background','000');
});

Но мне было интересно, есть ли функция, которую я мог бы вызвать при загрузке страницы, которая делает это в одну строку, когда пользователь ничего не делает.

Спасибо

Редактировать: Да, я торопился и печатал древним шрифтом вместо указателя мыши

Answer 1

Вы не можете выбрать псевдоселектор с помощью JavaScript. поэтому вам нужно создать новое правило CSS, которое переопределяет старое.

http://jsfiddle.net/dimitar/Z9RPP/

var StyleWriter = new Class({
    // css classes on the fly, based on by Aaaron Newton's old work
    createStyle: function(css, id) {
        try {
            if (document.id(id) && id) return;

            var style = new Element('style', {id: id||'',type:'text/css'}).inject(document.getElements('head')[0]);
            if (Browser.ie)
                style.styleSheet.cssText = css;
            else
                style.set('text', css);

        } catch(e) {
            //console.log("failed:", e);
        }
    }
});

new StyleWriter().createStyle("#hoverzone:hover { background:red;}", "foo");

Answer 2

Зачем использовать JavaScript. Почему бы просто не CSS:

#hoverzone { background: #000 }
#hoverzone:hover { background: #EEE }

Answer 3

Вы можете использовать события domready или load объекта Windows.

Например, что-то вроде:

window.addEvent('load', function(){
    $('hoverzone').setStyle('background-color','000');
});