Mootools 코드에 대한 도움말

Question

mootools에서 mousenter 데모를 사용하고 있습니다. 나는 링크에 영향을 미치려고 내 사이트에 올려 놓았습니다. 링크를 클릭하면 다른 색상으로 변합니다. 내가 겪고있는 문제는 mootools 코드가 하나의 ID 만 처리하도록 설정되었다는 것입니다! 탐색을 위해이 도구를 사용하고 있기 때문에 변경할 ID가 여러 개 있습니다. 어떻게 모두에 영향을 줄 수 있습니까? 나는 배열을 사용해야한다는 것을 알고 있지만 제대로 코딩하기 위해서는 자바 스크립트와 잘 맞지 않습니다. 도와주세요!

URL은 사전에 www.portfoliobyart.com/h20

감사합니다!

Answer 1

귀하의 사이트를 살펴 보았습니다.

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

당신이 당신의 탐색 메뉴의 모든 항목에 대해 동일한 효과를 얻을 것이다 : demo.js, 당신은이 선이에

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

를 변경하는 경우.

자세한 내용은 MooTools selectors을 참조하십시오. 선택기는 매우 강력한 도구입니다.

Answer 2

아래 코드는 각 nav 링크 요소를 가져 와서 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 
      }); 
     } 
    }); 
}); 

희망이 도움이 되셨습니다.