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

回答1:

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

回答2:

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');
});

回答3:

Why use javascript. Why not just css:

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

来源：https://stackoverflow.com/questions/5864599/changing-style-of-hover-selector-in-mootools

标签

mootools