CODEWITHSUNDEEP
javascriptmootoolsstyling
Chris
Chris

Reputation: 99

Mootools addClass for styling

So I've been learning JavaScript for a while now, and have just started to incorporate a framework. I chose MooTools for various reasons, but that's a bit off topic.

So, my first little bit of code I have created to add a class to li elements to which relate to a style on mouseover, and remove it on mouseleave. I've done this numerous times in JavaScript no worries, but can't get it working using MooTools.

HTML snippet:

    <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 snippet:

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

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

CSS snippet:

.navHover {
color: #FFF;
}

Possibly I'm not implementing the framework correctly, maybe I should just revert back to plain old JavaScript?

Thank you.

Upvotes: 0

Views: 676

Answers (1)

Michael Marr
Michael Marr

Reputation: 2099

You simply left out an "s". :-)

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

If you meant to do addEvent, then you should know it can only add a singular event, so if would have to be: $('navBar').getElements('a').addEvent("mouseenter", function() { ... }); As you wrote up, it is the right syntax for addEvents.

Source (although I think this issue was a typo): http://mootools.net/docs/core/Element/Element.Event#Element:addEvents

and jsfiddle working example: http://jsfiddle.net/pxLTX/

Upvotes: 1

Related Questions