この記事では、CSS pointer-events プロパティの使用方法について詳しく説明します。
pointer-events プロパティとは何ですか?
CSS「 ポインターイベント 」プロパティは、HTML 要素に対するポインター/タップの動作と、選択した要素がホバーやクリックなどのアクションを実行して応答するかどうかを指定します。
pointer-events プロパティの使用方法
CSS では、pointer-events プロパティを使用して、特定の HTML 要素に対するポインター アクションを有効または無効にすることができます。 pointer-events プロパティの構文を以下に示します。
構文
ポインターイベント : なし | | 自動 ;
上記の構文では、「 自動 ” は pointer-events プロパティのデフォルト値であり、要素へのポインター アクションを有効にし、” なし 」はautoとは正反対です。 HTML 要素に対するポインター アクションを無効にします。
先に進み、例を挙げて pointer-events プロパティを理解しましょう。
例 1
HTML ファイルで、アンカー タグに「」というテキストを指定します。 LinuxHint.io 」にして、本体セクション内に配置します。
HTML
< a href = 「https://www.linuxhint.io/」 > LinuxHint.io < / a >ここで、「 ポインターイベント ” プロパティに値を割り当てます “ なし 」。これにより、要素のポインター アクションが無効になります。
CSS
a {ポインターイベント : なし ;
}
上記のコードを含む HTML ファイルを保存し、ブラウザーを使用して実行します。
pointer-events プロパティを深くカバーする別の例を見てみましょう。
例 2
pointer-events プロパティの値を「 自動 ' この時。ポインターのホバーまたはクリックに要素が応答するようにします。それにもかかわらず、 auto は pointer-events プロパティのデフォルト値です。
CSS
a {ポインターイベント : 自動 ;
}
出力
CSS pointer-events プロパティのさまざまな使用法について説明しました。
結論
ポインターの動作を制御するために、CSS「 ポインターイベント ' 財産。 「 自動 value は、このプロパティの定義済みの値です。 HTML 要素に対するアクションを有効にします。 pointer-events プロパティが値 ' なし 」、特定の要素に対するアクションを無効にします。この記事では、CSS pointer-events プロパティの使用方法を示しました。