CSS-Trick zum Deaktivieren von Links

Problem:

Ist es möglich, Links mithilfe von CSS zu deaktivieren? Wenn Sie beispielsweise eine Klasse mit dem Namen „aktuelle Seite“ haben, möchten Sie möglicherweise verhindern, dass Links zu dieser Klasse aktiv sind, wenn darauf geklickt wird.

Lösung:

Das folgende CSS-Code-Snippet bietet eine einfache Lösung:

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

Dieser Code zielt auf Elemente mit dem Attribut „aria-current='page'“ ab und deaktiviert deren Interaktivität, indem „pointer-events“ auf „none“ gesetzt wird. Außerdem wird der typische Linkstil entfernt, indem „Cursor“ auf „Standard“ gesetzt, Textdekoration entfernt und die Textfarbe auf Schwarz zurückgesetzt wird.

Um diese Lösung in HTML anzuwenden, können Sie Ihren Link wie folgt ändern:

Link

Dadurch wird der Link deaktiviert und verhindert, dass er angeklickt werden kann, wenn der Die Klasse „aktuelle Seite“ wird angewendet.