JavaScript でのマウスオーバーのシミュレート: 不一致の明確化と手動制御の実装

Chrome でマウスオーバー イベントをシミュレートしようとしているときに、興味深い問題に遭遇したかもしれません。問題。 「mouseover」イベント リスナーが正常にアクティブ化されたにもかかわらず、対応する CSS の「hover」宣言は有効になりません。さらに、mouseover リスナー内で classList.add("hover") を使用して要素のクラス リストを変更しようとしても、必要な CSS 変更をトリガーできません。

重要なのは、信頼できるイベントと信頼できないイベントの区別を理解することにあります。ブラウザのセキュリティ プロトコルによれば、ユーザーの操作または DOM の変更から発生する特定のイベントは信頼できるものとみなされますが、JavaScript によって開始されたイベントは信頼できないものとして分類されます。ホバー イベントは後者のカテゴリに分類されます。

信頼できない性質のため、ホバー イベントは事前に定義された CSS アクションを直接トリガーできません。これは、悪意のあるスクリプトがページの動作の重要な側面を変更するのを防ぐことを目的とした保護措置です。

したがって、JavaScript で目的のホバー効果を実現するには、別のアプローチが必要です。ネイティブのホバー イベントに依存する代わりに、マウスオーバー イベントとマウスアウト イベントが発生したときに、カスタム クラス (「ホバー」など) を手動で追加および削除できます。これにより、「ホバー」状態に関連付けられた CSS の変更を自分で制御できるようになります。