JSで無効なホバーの問題を解決する方法

これは実際にはCSSの優先順位が原因です。

まず、jsを使用してcss属性を追加せずに、hoverで通常どおり背景色を設定する方法を見てみましょう。

<div id="add"></div>

#add{
  width: 50px;
  height: 50px;
  background-color: greenyellow;
}#add:hover{
  background-color: #000;
}

左の写真はデフォルト、右の写真はマウスを置いたときの状態ですが、これでホバーが正常に表示されます。

(下の写真は、左側がデフォルト、右側がホバーです。スクリーンショットツールがマウスをキャプチャできないためです)

ただし、CSSスタイルがjsを介して挿入されている場合、マウスが配置されたときのホバースタイルは、配置しても有効になりません。

var add = document.getElementById("add");
add.style.backgroundColor = "red";

ホバーに設定されていた #000 属性が無効になりました。

ただし、これは hover 疑似クラスの失われた機能ではありません。設定が js によって追加されたスタイルではない場合、たとえば、フォントの色を追加してみてください。

#add:hover{
  background-color: #000;
  color: yellow;
}

フォントの色がまだ変化していることがわかります。

その理由は、jsに追加すべきcssスタイルがhtmlタグのスタイルに直接追加されており、css擬似クラスよりもスタイルの優先順位が高いためです。

スタイル、ホバー、ID セレクターは上から下にあります。

ブラウザのデバッグツールで、jsがスタイルに直接追加されていることがわかります。

それではどうすればいいでしょうか?

セレクターの優先順位について話します。ただし、CSS 疑似クラスとスタイルの優先順位については触れていません。

しかし、 :hover 擬似クラスも無効です。説明スタイル>css疑似クラス>id>クラス。

:hover 属性の後に ! important を追加するだけです。 !何よりも優先すべきこと! ！

!重要>スタイル>CSS疑似クラス>ID>クラス。

#add:hover{
  background-color: #000 !important;
}

今、私はついに望む結果を達成しました。

以上がJSで無効なホバーの問題を解決する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。