インタラクティブ性
要素がポインターイベントに応答するかどうかを制御するためのユーティリティ。
| クラス | スタイル |
|---|---|
pointer-events-auto | pointer-events: auto; |
pointer-events-none | pointer-events: none; |
pointer-events-none ユーティリティを使用して、:hover や click イベントなどのポインターイベントを要素が無視するようにします。
検索アイコンをクリックして、期待される動作を確認してください
pointer-events-auto
pointer-events-none
<div class="relative ..."> <div class="pointer-events-auto absolute ..."> <svg class="absolute h-5 w-5 text-gray-400"> <!-- ... --> </svg> </div> <input type="text" placeholder="Search" class="..." /></div><div class="relative ..."> <div class="pointer-events-none absolute ..."> <svg class="absolute h-5 w-5 text-gray-400"> <!-- ... --> </svg> </div> <input type="text" placeholder="Search" class="..." /></div>ポインターイベントは、子要素で引き続きトリガーされ、ターゲットの「下」にある要素にパススルーされます。
pointer-events-auto ユーティリティを使用して、ポインターイベントのデフォルトのブラウザの動作に戻します。
<div class="pointer-events-none md:pointer-events-auto ..."> <!-- ... --></div>