JavaScript はマウス操作なしで CSS :hover 効果を本当にシミュレートできますか?

JavaScript による CSS ホバー効果のシミュレート

質問:

純粋な JavaScript を使用して CSS を模倣することは可能ですか? 「:hover」効果。実際にマウスオーバーをトリガーせずに、関連付けられた CSS ルールをアクティブ化します。イベント?

問題が発生しました:

• マウスオーバー イベント リスナーを追加したにもかかわらず、CSS ホバー宣言は非アクティブなままです。
• 手動で追加しようとしていますJavaScript 経由の「hover」クラス (例: theElement.classList.add("hover"))望ましい視覚効果はトリガーされません。

答え:

残念ながら、信頼できるイベントの性質上、純粋な JavaScript で真のマウスオーバー イベントをシミュレートすることは実現できません。 .

Web ブラウザでは、ユーザーの操作によってトリガーされるイベントなど、特定のイベントが信頼できるものとみなされます。逆に、シミュレートしようとしているイベントなど、JavaScript によって生成されたイベントは信頼できません。信頼できないイベントは、ほとんどの HTML 要素 (ホバー効果など) のデフォルト アクションのトリガーなど、特定のアクションを実行できません。

解決策:

唯一の実行可能なオプションは、手動で実行することです。マウスオーバー イベント リスナーとマウスアウト イベント リスナーをそれぞれ使用してターゲット要素のクラスを追加および削除することで、ホバー効果を管理します。以下に例を示します:

const hoverElement = document.querySelector("selector");

hoverElement.addEventListener("mouseover", () => {
  hoverElement.classList.add("hover");
});

hoverElement.addEventListener("mouseout", () => {
  hoverElement.classList.remove("hover");
});

以上がJavaScript はマウス操作なしで CSS :hover 効果を本当にシミュレートできますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。