Mootools addClass用于样式

时间:2013-02-21 14:12:29

标签: javascript mootools styling

所以我已经学习了一段时间的JavaScript,并且刚刚开始合并框架。我出于各种原因选择了MooTools,但这有点偏离主题。

所以,我创建的第一个代码是为了将一个类添加到与鼠标悬停时的样式相关的li元素,并在mouseleave上删除它。我已经无数次地在JavaScript中完成了这么多次,但是使用MooTools无法实现它。

HTML片段:

    <ul id="navBar">
    <li><a href="#">Test</a></li>
    <li><a href="#">Test</a></li>
    <li><a href="#">Test</a></li>
    <li><a href="#">Test</a></li>
</ul>

JS Framework代码段:

window.addEvent('domready', function() {

$('navBar').getElements('a').addEvent({
    mouseenter:function(){
        $(this).addClass('navHover');
    },
    mouseleave:function(){
        $(this).removeClass('navHover');
    }
});
});

CSS片段:

.navHover {
color: #FFF;
}

可能我没有正确实现框架,也许我应该恢复原来的JavaScript?

谢谢。

1 个答案:

答案 0 :(得分:1)

你只是遗漏了一个&#34; s&#34;。 : - )

   $('navBar').getElements('a').addEvents({
                                        ^ here

如果您打算addEvent,那么您应该知道它只能添加一个单一事件,所以如果必须:$('navBar').getElements('a').addEvent("mouseenter", function() { ... });正如您所写,它是{的正确语法{1}}。

来源(虽然我认为这个问题是一个错字):http://mootools.net/docs/core/Element/Element.Event#Element:addEvents

和jsfiddle工作示例:http://jsfiddle.net/pxLTX/