2009-05-03 15 views
1

私が持っている:要素にホバークラスを追加するにはどうすればよいですか?私のCSSで

li.sort:hover {color: #F00;} 

sortクラスの関数の下にすべての私のLI要素DOMの準備ができている、適切とき。

私は(MooToolsのel.addClass(classname)を使用して)新しいLI要素を作成した場合、私は、基本クラスを設定することができますが、それにhoverクラスを追加する方法を見つけ出すことはできません。

アイデア?

+0

MyClass:hoverは新しい要素では機能しません。すべてのブラウザは、新しく挿入されたDOM要素でこのような疑似クラスを考慮していないようです。 'mouseover'イベントと' mouseleave'イベントのための新しいイベントハンドラを追加し、通常のMyHoverクラスを要素に追加/削除することで、この問題を回避する必要がありました。理想的ではありませんが、機能します。 – dengel

答えて

7

あなたが指定しているクラス名に基づいて、スタイルシート内であらかじめホバー疑似クラスを定義することができます。次のようになります。

li.classname:hover {color:#F000;} 

したがって、スタイルシートを使用して同じ方法で定義します。特定のクラスを持つJS生成のLIタグでクラス名を定義し、JavaScriptで作成するまではリスト項目が存在しないにもかかわらず、そのスタイルを定義することになります。

3

非ホバークラスを追加すると、ホバークラスが自動的に追加されます。例えば。あなたは

.MyClass 
{ 
... 
} 

.MyClass:hover 
{ 
... 
} 

を持っている場合だけMyClassを追加し、MyClass:hoverが動作します。

+0

クラス名とID名は大文字で始めることはできません。 – Wolfr

+0

それは私のために働くので、私はできる: – Kamarey

+0

XMLタグの名前と属性はすべて小文字にする必要がありますが、IDとクラス名を大文字にすることはできません。それはどんな仕様ですか? – Calvin

2

:hoverはクラスではありませんが、マウスが現在マウスオーバーしている要素を選択する疑似セレクタです。 li要素を作成してsortクラスを追加する場合は、ブラウザが正常に機能している場合は、要素上にマウスを移動するたびにli.sort:hoverルールをアクティブにする必要があります。

0

すべてのブラウザで、すべての要素でホバー擬似クラスを使用できるわけではありません。あなたは、この効果のためにJavaScriptを使用することを検討する必要があります。例えば、jQueryはこれを非常に簡単にします。

0

すべてのブラウザで、すべての要素でホバー擬似クラスを使用できるわけではありません。あなたは、この効果のためにJavaScriptを使用することを検討する必要があります。例えば、jQueryはこれを非常に簡単にします。

具体的には、IE6は、アンカー(a)要素のホバースタイルのみを選択します。

関連する問題