Changing style of :hover selector in mootools

I have tried google, but I can not definite answer.

I am trying to edit the styles of #开发者_运维问答sidebar:hover from mootools. My css is as follows:

#hoverzone:hover {
    background: #EEE;
}

Now, I am trying to edit the background color from mootools when the page loads, to signify javascript is enabled. I know I can do:

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

But I was wondering if there is a function I could call at the load of the page, that does this in one line with out the user doing anything.

Thanks

Edit: Yes, I was rushing, and anciently typed over instead of mouseenter

you cannot target a pseudo selector with javascript. so you need to create a new CSS rule that overrides the old one.

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");

You can use the events domready or load of the windows object.

For example something like:

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

Why use javascript. Why not just css:

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