Help with Mootools code

Question

So I am using the mousenter demo from mootools. I put it on my site trying to affect the links so when someone hovers over them the link fades into another color. The problem I am having is that the mootools code is only set up to handle one ID! Since I am using it for a nav, I have multiple IDs that I want to change. How can I affect all of them? I know I should use an array but I'm not that good with javascript in order to code it properly. Please help!

The URl is www.portfoliobyart.com/h20

Thanks in advance!

Answer 1

I took a look at your site. In demo.js, if you change this line

$('link').set('opacity', 0.5).addEvents({

to this:

$$('.nav a div').set('opacity', 0.5).addEvents({

you will achieve the same effect for every item in your nav menu.

You should read up on MooTools selectors for more about this. Selectors are a very powerful tool.

Answer 2

the code below will take each of the nav link elements and add the mouseenter and mouseout events.

//selects all nav elements
$$('.nav a div').each(function(el){
    //this is the interior of the function that will run on each el
    //store the original bg color
    var color = el.getStyle('backgroundColor');

    //now add the mouseenter and leave events w/ the morphs
    el.set('opacity', 0.5).addEvents({
        mouseenter: function(){
  // This morphes the opacity and backgroundColor
      this.morph({
       'opacity': 1,
       'background-color': '#000000'
      });
     },
     mouseleave: function(){
  // Morphes back to the original style
      this.morph({
       opacity: 0.5,
       backgroundColor: color
      });
     }
    });
});

hope this helps!