JavaScript は Chrome で CSS :hover をアクティブにするマウスオーバーをシミュレートできますか?

JavaScript で CSS ":hover" をアクティブにするマウスオーバー イベントのシミュレーション

質問:

「マウスオーバー」をトリガーしたにもかかわらずイベントが発生しても、CSS の「:hover」宣言は非アクティブなままになります。 theElement.classList.add("hover") を使用して要素に「hover」クラスを手動で追加しようとしても、効果はありません。 CSS の「:hover」プロパティをアクティブにして、Chrome でマウスオーバーを正常にシミュレートすることは可能ですか?

答え:

次のような方法でマウスオーバーをシミュレートすることは現実的ではありません。セキュリティ制限により、CSS の「:hover」宣言がトリガーされます。ユーザーの操作や DOM の変更によってトリガーされたイベントは信頼できると見なされますが、JavaScript によって作成されたイベントは信頼できないと見なされます。

W3C 仕様によれば、信頼できないイベントは、CSS ":hover のアクティブ化を含む、デフォルトでブラウザーのアクションをトリガーすべきではありません「効果。マウスオーバー動作を効果的にシミュレートするには、「mouseover」イベントと「mouseout」イベントの要素にカスタム クラスをそれぞれ手動で追加および削除する必要があります。このカスタム クラスを使用すると、CSS を通じて目的のスタイルを適用し、「:hover」宣言の効果を模倣できます。

以上がJavaScript は Chrome で CSS :hover をアクティブにするマウスオーバーをシミュレートできますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。