次の投稿では、ポインター イベント プロパティをコードで使用して、HTML ドキュメント内のリンクを無効にする方法について説明します。
CSS を使用してリンクを無効にする
CSS ライブラリは、HTML などの他の言語と組み合わせて使用されます。したがって、HTML ドキュメントに他の Web ページに直接アクセスするためのリンクがある場合、CSS の pointer-events プロパティを使用してリンクを無効にします。
ポインターイベント : なし ;
カーソル : デフォルト ;
コードで pointer-events プロパティを使用する方法は?
リンクを無効にするために pointer-events プロパティを追加する CSS スタイル ステートメントは、リンクを含むクラスを参照する必要があります。たとえば、リンクを含む「not-active」という名前のクラスがある場合:
< h1 > CSS を使用してリンクを無効にする < / h1 >< br >
< b > リンク： < / b >
< a href = 'https://www.google.com/' クラス = '非活動中' > ここをクリック < / a >
上記のコードでは、クリック可能なリンクには、この HTML 要素へのアクセスに使用されるクラス「非アクティブ」があります。
上記のコードは、次の出力を生成します。
リンクをクリックすると、ユーザーは Google 検索エンジンに誘導されます。
pointer-event プロパティ
- CSS スタイル要素内に、ポインター イベント プロパティ ( ポインターイベント: なし ) 無効にする必要があるリンクを含むクラス (非アクティブ) を参照している間。
- デフォルト、なし、ポインターなどのオプションのいずれかとしてカーソルを設定します。
。非活動中 {
ポインターイベント : なし ;
カーソル : デフォルト ;
}
>
コードを実行した後、外部からのリンクのグラフィック表示に変化はありませんが、ユーザーがそれをクリックしても何もしません:
これは、CSS ステートメントを使用してコード内のリンクを無効にする最も簡単な方法でした。
結論
ユーザーを他の Web ページに誘導するリンクは、単純な CSS の「pointer-events: none」プロパティを使用して簡単に無効にすることができます。これには、リンクが作成されたコードやクラスのロジックを変更する必要はありません。リンクを含むクラスを参照するスタイル要素の単純なポインター イベント プロパティが必要です。