Mootoolsのヘルプ

Question

mootoolsのmousenterのデモを使用しています。私はリンクに影響を与えようとしている私のサイトにそれを置くので、誰かがリンクを張ってリンクが別の色に消えてしまいます。私が抱えている問題は、mootoolsのコードが1つのIDだけを扱えるように設定されていることです！私はnavのためにそれを使用しているので、私は変更したい複数のIDを持っています。どのように私はそれらのすべてに影響を与えることができますか？私は配列を使用する必要があることを知っているが、私はそれを適切にコーディングするためにjavascriptでうまく行っていない。助けてください！

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

これが役に立ちます。