ホームページ > ウェブフロントエンド > CSSチュートリアル > JavaScript は CSS :hover 効果を確実にシミュレートできますか?

JavaScript は CSS :hover 効果を確実にシミュレートできますか?

Barbara Streisand
リリース: 2024-12-17 13:27:17
オリジナル
297 人が閲覧しました

Can JavaScript reliably simulate CSS :hover effects?

Simulating Mouseover in JavaScript: Challenges with CSS :hover

Attempting to simulate a mouseover event in JavaScript to activate the CSS ":hover" property can prove challenging, as demonstrated by the following query:

Question:

I've been attempting to simulate a mouseover event using a mouseover listener in Chrome. While the listener is triggered, the :hover declaration remains inactive. I tried manually adding a "hover" class, but it failed to alter the element's appearance. Is it possible to accomplish this?

Answer:

残念ながら、この方法は不可能です。マウスオーバーは信頼されたイベントではありません。

ユーザーエージェントによって生成されるイベント(ユーザーとのインタラクションの結果か、DOM の変更の直接の結果)は、スクリプトによって DocumentEvent.createEvent("Event") メソッドで生成されたイベント、Event.initEvent() メソッドで変更されたイベント、または EventTarget.dispatchEvent() メソッドでディスパッチされたイベントに与えられない特権を持つ信頼されたイベントです。信頼されたイベントの isTrusted 属性は true の値を持ち、信頼できないイベントの isTrusted 属性は false の値を持ちます。

信頼できない大部分のイベントは、クリックまたは DOMActivate イベントを除いて、既定のアクションをトリガーしません。

したがって、mouseover/mouseout イベントでクラスを手動で追加し、削除する必要があります。

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

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート