CSS を使用してリンクを無効にするにはどうすればよいですか?

リンクを無効にする CSS トリック

問題:

CSS を使用してリンクを無効にすることは可能ですか?たとえば、「current-page」というクラスがある場合、そのクラスへのリンクがクリックされたときにアクティブにならないようにすることができます。

解決策:

次の CSS コード スニペットは、簡単な解決策を提供します。

[aria-current="page"] {
  pointer-events: none;
  cursor: default;
  text-decoration: none;
  color: black;
}

このコードは、「aria-current='page'」属性を持つ要素をターゲットにしており、 「pointer-events」を「none」に設定することで対話性を無効にします。また、「カーソル」を「デフォルト」に設定し、テキストの装飾を削除し、テキストの色を黒にリセットすることで、一般的なリンクのスタイルも削除されます。

このソリューションを HTML に適用するには、次のようにリンクを変更します。

<a href="link.html" aria-current="page">Link</a>

これにより、リンクが無効になり、「current-page」クラスが適用されているときにリンクをクリックできなくなります。

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