Помогите с кодом Mootools

Question

Так что я использую демоверсию mousenter от mootools. Я помещаю его на свой сайт, пытаясь повлиять на ссылки, поэтому, когда кто-то наводит на них курсор, ссылка теряет цвет У меня проблема в том, что код mootools настроен только для обработки одного идентификатора! Поскольку я использую его для навигации, у меня есть несколько идентификаторов, которые я хочу изменить. Как я могу повлиять на них всех? Я знаю, что должен использовать массив, но я не так хорош с JavaScript, чтобы правильно его кодировать. Пожалуйста, помогите!

URl - www.portfoliobyart.com / h20

Заранее спасибо!

Answer 1

Я взглянул на ваш сайт. В demo.js, если вы измените эту строку

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

к этому:

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

вы получите тот же эффект для каждого элемента в вашем меню навигации.

Вы должны прочитать о селекторах MooTools , чтобы узнать больше об этом. Селекторы - очень мощный инструмент.

Answer 2

код ниже возьмет каждый из элементов навигационной ссылки и добавит события mouseenter и mouseout.

//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
            });
        }
    });
}); 

надеюсь, это поможет!