web-dev-qa-db-ja.com

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

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

JQueryに似ていますが、CSSに変換されます。

$(element).addClass('someclass');
cssaddclass
25
itsme

短い答えいいえ:)

ただし、次のようにホバーに同じCSSを使用できます。

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

クラスを追加する必要がある理由を説明すると、より良い解決策があるかもしれません。

28
Rene Koch

誰もがこれに対するjQuery/JSの回答を提供しているため、追加のソリューションを提供します。あなたの質問への答えはまだありませんが、LESS（CSSプリプロセッサ）を使用すると、これを簡単に行うことができます。

.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;
  }
}
19
Nate

CSSには、実際にはJavaScriptと同じ方法でオブジェクトを変更する機能がないため、要するに-いいえ。

6
Fluidbyte

:hoverは擬似クラスであるため、CSS宣言をそこに配置できます。

a:hover {
    color: #f00;
}

セレクターのリストを使用して、ホバーされた要素または特定のクラスを持つ要素にCSS宣言を適用することもできます。

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

@Marco Berroclが否定的なフィードバックを得る理由と彼の答えは、ライブラリを使用してアニメーションを作成することについてまったく正しいので、ライブラリからコードをコピーしない要素にホバーでクラスを呼び出す必要があり、これは私を遅くします.

ホバーは答えではなく、多くの場合jqueryまたはjavascriptを使用する必要があると思います

0
user3972776

これがあなたのやり方です：

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