リンクを無効にする 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 に適用するには、次のようにリンクを変更します。

Link

これにより、リンクが無効になり、 「current-page」クラスが適用されます。