[解決済み] JavaScriptで:hoverのCSSプロパティを変更する

質問

JavaScriptはどのようにCSSを変更することができますか？ :hover のプロパティを変更できますか？

例えば

HTML

<table>
  <tr>
    <td>Hover 1</td>
    <td>Hover 2</td>
  </tr>
</table>

CSS

table td:hover {
background:#ff0000;
}

どのようにすれば td :hover プロパティは、例えば、次のように修正されます。 background:#00ff00 に変更することはできますか？私は、JavaScriptを使用してスタイル背景プロパティにアクセスできることを知っています。

document.getElementsByTagName("td").style.background="#00ff00";

しかし、私は .style に相当する JavaScript の :hover .

どのように解決するのですか？

のような擬似クラスは :hover は，決して要素を参照せず，スタイルシート規則の条件を満たす任意の要素を参照する。あなたは スタイルシート規則を編集する , 新しいルールを追加する を含む新しいスタイルシートを追加するか、または新しい :hover ルールを含む新しいスタイルシートを追加する。

var css = 'table td:hover{ background-color: #00ff00 }';
var style = document.createElement('style');

if (style.styleSheet) {
    style.styleSheet.cssText = css;
} else {
    style.appendChild(document.createTextNode(css));
}

document.getElementsByTagName('head')[0].appendChild(style);