更改 mootools 中 :hover 选择器的样式

Question

我已经尝试过谷歌，但我无法确定答案。

我正在尝试从 mootools 编辑 #sidebar:hover 的样式。我的 css 如下：

#hoverzone:hover {
    background: #EEE;
}

现在，我尝试在页面加载时从 mootools 编辑背景颜色，以表示启用了 javascript。我知道我可以做到：

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

但我想知道是否有一个函数可以在页面加载时调用，该函数可以在一行中完成此操作，而无需用户执行任何操作。

谢谢

编辑：是的，我很着急，并且古老地键入而不是 mouseenter

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

您可以使用 windows 对象的 domready 或 load 事件。

例如：

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

Answer 3

为什么使用 JavaScript。为什么不只是CSS：

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