2011-08-12 21 views
1

I使用していますMooToolsは1.12MooToolsでホバリング要素のクラスを追加するには?

どのように広告のクラスホバー上の要素?

私はこれをしたいリンクoverrホバリング時に、私はこの

<a href="example.html">Some text</a> 
<a href="example.html">Some text</a> 
<a href="example.html">Some text</a> 
<a href="example.html">Some text</a> 

ANFを持っている:事前

答えて

4

<a href="example.html">Some text</a> 
<a href="example.html">Some text</a> 
<a class="hover" href="example.html">Some text</a> <!-- I am over this link --> 
<a href="example.html">Some text</a> 

おかげで単純にmouseenterにクラスを追加または削除するイベントを定義しますmouseleave。あなたがリンク上でのCSSプロパティを変更するには、このを使用している場合

$$('a').addEvents({ 
    'mouseenter': function() { $(this).addClass('hover'); }, 
    'mouseleave': function() { $(this).removeClass('hover'); } 
}); 

しかし、あなたはCSSで:hover擬似クラスを使用したほうが良いです。擬似クラスを使用すると、Javascriptを使用しないブラウザでも変更が有効になります。

+0

$(this)の必要はなく、this.addClass( 'hover');と 'this.removeClass( 'hover');'は正しくなければなりません。 – eerne

+0

@eerne:MooToolsのバージョンや使用されているブラウザによっては、 'this'はMooToolsの関数でプロトタイピングされていないかもしれません。 '$(this)'を使うだけで安全ですし、スクリプトのパフォーマンスに悪影響を与えません。 –

+0

特にマウスオーバー/アウトイベントではパフォーマンスに多少の影響を与えますが、このイベントは複数回連続してトリガされます。この場合、 'this'はプロトタイピングされます - ' $$( "a") 'はelsを返し、プロトタイプを設定します(IE6-8の場合) –

関連する問題