要素に新しいクラスを動的に追加するにはどうすればよいですか？

Question

:hoverの要素に新しいCSSクラスを追加する方法はありますか？

jQueryのために似ていますが、CSSに翻訳：

$(element).addClass('someclass'); 

Answer 1

短い答えがない:)

しかし、あなたはちょうどそうのようなホバーのために同じCSSを使用することができます。

a:hover, .hoverclass { 
    background:red; 
} 

なぜクラスを追加する必要があるのか​​説明すれば、より良い解決策が得られるかもしれませんか？

Answer 2

なし、唯一のCSSを使用しました。 jQueryを使用して追加する必要があります。

Answer 3

CSSには、JavaScriptと同じようにオブジェクトを変更する機能がありません。

Answer 4

:hoverは擬似クラスですので、あなたがあなたのCSS宣言を置くことができます。

a:hover { 
    color: #f00; 
} 

あなたはまた、特定のクラスでホバー要素または要素にCSS宣言を適用するセレクタのリストを使用することができます。

.some-class, 
a:hover { 
    color: #f00; 
} 

Answer 5

なぜ@Marco Berroclが否定的なフィードバックを得て、彼の答えは完全に正しいです ライブラリを使ってアニメーションを作成すると、ライブラリにコードをコピーしていない要素にカーソルを置く必要があります私は遅くなります。

ので、私は答えをないホバー考えると誰もがあなたにこのへのjQuery/JSの答えを与えているので、私は追加のソリューションを提供します、彼は多くの場合、

Answer 6

をjqueryのか、JavaScriptを使用する必要があります。あなたの質問に対する答えはまだノーですが、LESS（CSS Pre-processor）を使うと簡単にこれを行うことができます。

.first-class { 
    background-color: yellow; 
} 
.second-class:hover { 
    .first-class; 
} 

かなり単に、あなたが.second-class上にカーソルを置く任意の時間は、それはそれを.first-classのすべてのプロパティを提供します。ホバーだけでクラスを永続的に追加することはありません。あなたはここにLESSについての詳細を学ぶことができます。ここではGetting Started with LESS

は同様にそれを行うにはSASSの方法です：

.first-class { 
    background-color: yellow; 
} 
.second-class { 
    &:hover { 
    @extend .first-class; 
    } 
} 

Answer 7

これは、あなたがそれを行う方法です。

var e = document.getElementById('myIdName'); 
var value = window.getComputedStyle(e, null).getPropertyValue("zIndex"); 
alert('z-index: ' + value);