:hover を無効にしたい（未解決）

久々のエントリ。

しかも Javascript の話です。

て言うか、もともとそういうブログなんだよ！お料理ブログじゃないんだからね！ｗ


で、 :hover を無効にしたいわけです。

こんなクラスがあったとします。

.box { background: white; }
.box:hover { background: red; }

で、こう適用する。

<div class="box"> ～ </box>

すると、この白い箱にマウスポインターが乗ったら赤くなるわけです。


ですが、hover させたくない時がありまして、その方法に悩み中です。

.box, .box_nohover { background: white; }
.box:hover { background: red; }

なんて言う :hover の定義のないクラスを用意して、

～.classList.remove("box");
～.classList.add("box_nohover");

というように適用するクラスを置き換えれば実現はできるんですが、クラスを２つ用意するのが

なんか美しくない

なんかこう、もっとスマートに解決したい。

てなわけで悩み中。