ホームページ >ウェブフロントエンド >CSSチュートリアル >CSS 疑似要素のクリック イベントを検出するにはどうすればよいですか?

CSS 疑似要素のクリック イベントを検出するにはどうすればよいですか?

DDD
DDDオリジナル
2024-12-23 05:51:37452ブラウズ

How Can I Detect Click Events on CSS Pseudo-Elements?

疑似要素のクリック イベント検出

:before や :after などの疑似要素は、HTML 要素のスタイル機能を強化します。仮想コンテンツの挿入。ただし、これらの仮想要素は DOM の一部ではなく、直接的なイベント処理機能がありません。

指定された例では、赤色の疑似要素 (p:before を使用して作成された) 上でのみクリック イベントを検出することには問題があります。疑似要素は DOM で表現されないため、クリック イベントを疑似要素に直接バインドすることはできません。

解決策:

目的の動作を実現するには、子の使用を検討してください。擬似要素の代わりに要素を使用します。 <スパン>を作成します。要素を選択し、開始

の直後に配置します。タグ。現在 p:before に適用されているスタイルをこの に適用します。

<p>
  <span></span>Lorem ipsum dolor sit amet...
</p>
p span {
  content: '';
  position: absolute;
  left:100%;
  width: 10px;
  height: 100%;
  background-color: red;
}

これで、クリック イベントを 要素にバインドできるようになりました。

注:

擬似要素内の子要素へのイベントのバインドは、すべてのブラウザで一貫してサポートされているわけではありません。ブラウザ間の互換性を最適化するには、イベント処理に疑似要素に依存するのではなく、上記のアプローチを使用することを検討してください。

以上がCSS 疑似要素のクリック イベントを検出するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。