javascript - Mootools リンクのホバーと色の変更

Question

mootools の mousenter デモを使用しています。リンクに影響を与えようとして自分のサイトに置いたので、誰かがそれらにカーソルを合わせると、リンクが別の色にフェードします。私が抱えている問題は、mootools コードが 1 つの 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セレクターをお読みください。セレクターは非常に強力なツールです。

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

お役に立てれば！