幫助使用Mootools代碼

Question

所以我使用mootools的mousenter演示。我把它放在我的網站上試圖影響鏈接，所以當有人懸停在他們身上時，鏈接淡入另一種顏色。我遇到的問題是，mootools代碼只能設置爲處理一個ID！由於我用於導航，我有多個我想改變的ID。我如何影響他們所有人？我知道我應該使用一個數組，但我不是很好用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 selectors瞭解更多。選擇器是一個非常強大的工具。

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

希望這有助於！