Mootools addClass for styling

Question

Итак, я изучаю 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?

спасибо.

Answer 1

Вы просто оставили «s». :-)

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

Если вы имели в виду сделать addEvent, то вы должны знать, что можно добавить только единичное событие, поэтому, если бы быть: $('navBar').getElements('a').addEvent("mouseenter", function() { ... }); Как написал, это правильный синтаксис для addEvents.

Источник (хотя я думаю, что этот вопрос был опечатка): http://mootools.net/docs/core/Element/Element.Event#Element:addEvents

и jsfiddle рабочий пример: http://jsfiddle.net/pxLTX/