So deaktivieren Sie einen Link nur mit CSS

Lesezeit: 5 Minuten

So deaktivieren Sie einen Link nur mit CSS
RSK

Gibt es eine Möglichkeit, einen Link mit CSS zu deaktivieren?

Ich habe eine Klasse namens current-page und möchten, dass Links mit dieser Klasse deaktiviert werden, damit keine Aktion ausgeführt wird, wenn darauf geklickt wird.

  • nach viel googeln habe ich die perfekte Antwort auf diese Frage bekommen css-tricks.com/pointer-events-current-nav

    – RSK

    26. Mai 2010 um 14:13 Uhr


  • Ob ein Link verwendet werden sollte oder nicht, hat mehr semantischen als präsentationalen Wert. Es sollte nicht über CSS deaktiviert werden, sondern über die Verwendung von hidden -Attribut, das auf jedes HTML-Element anwendbar ist. CSS kann dann verwendet werden, um zB auszuwählena[hidden] verankern und entsprechend stylen.

    – amn

    11. Juli 2016 um 12:22 Uhr


  • @amn, aber ich glaube nicht, dass Browser ein Element mit dem versteckten Attribut anzeigen, sodass das Styling strittig wird.

    – Benutzer1794469

    11. Januar 2017 um 15:59 Uhr

  • @ user1794469 Sie werden es tun, wenn Sie sie mit CSS anweisen, zu verwenden display: blockzum Beispiel oder ein anderer Wert für display. Aber hidden ist nicht immer anwendbar – es ist für Elemente, die sind irrelevantund aus der Frage ist es nicht unklar warum Der Link sollte deaktiviert sein. Dies ist wahrscheinlich ein Fall von XY-Problem.

    – amn

    19. Januar 2017 um 13:05 Uhr

Von diese Lösung:

[aria-current="page"] {
  pointer-events: none;
  cursor: default;
  text-decoration: none;
  color: black;
}
<a href="https://stackoverflow.com/questions/2091168/link.html" aria-current="page">Link</a>

Informationen zur Browserunterstützung finden Sie unter https://caniuse.com/#feat=pointer-events. Wenn Sie Internet Explorer unterstützen müssen, gibt es eine Problemumgehung; siehe diese Antwort.

Warnung: Die Verwendung von pointer-events in CSS für Nicht-SVG-Elemente ist experimentell. Das Feature war früher Teil der CSS 3 UI-Entwurfsspezifikation, wurde aber aufgrund vieler offener Probleme auf CSS 4 verschoben.

  • Außerdem vermeidet dies nicht, mit der Tabulatortaste zum Link zu gehen und dann einzutreten.

    – Jono

    22. Dezember 2013 um 9:26 Uhr

  • Wenn Sie es ein wenig stylen würden, kann der Benutzer sehen, dass es deaktiviert ist. Geben Sie ihm etwas Deckkraft: .2

    – DNRN

    4. Februar 2014 um 10:13 Uhr

  • Dies funktioniert jetzt in allen modernen Browsern einschließlich IE 11. Wenn Sie Unterstützung für IE 10 und darunter benötigen, können Sie ein JavaScript-Polyfill wie z Dieses hier.

    – Keavon

    31. Juli 2014 um 5:13 Uhr

  • Wichtiger Hinweis: Dies deaktiviert nur das Klicken, nicht den eigentlichen Link selbst. Sie können immer noch Tab + Enter verwenden, um auf den Link zu “klicken”.

    – Pikamander2

    23. September 2014 um 23:55 Uhr

  • Gebrauch von pointer-events: none; ist nicht perfekt. Es deaktiviert auch andere Ereignisse wie Hover, die für die Anzeige von erforderlich sind title="…" oder Tooltips. Ich fand die JS-Lösung besser (mit event.preventDefault();) zusammen mit etwas CSS (cursor: default; opacity: 0.4;) und einen Tooltip, der erklärt, warum der Link deaktiviert ist.

    – Quinn Comendant

    24. Juli 2015 um 3:34 Uhr

So deaktivieren Sie einen Link nur mit CSS
Amir Keshavarz

.disabled {
  pointer-events: none;
  cursor: default;
  opacity: 0.6;
}
<a href="#" class="disabled">link</a>

  • Möglicherweise müssen Sie die Anzeige auf Inline-Block (oder etwas anderes als Inline) einstellen.

    – dev_masta

    23. Dezember 2016 um 13:39 Uhr

  • nett, aber Vorsicht Browserunterstützung für Zeigerereignisse (dh < IE11) : caniuse.com/#search=pointer-events

    – Darren Shewry

    27. März 2017 um 7:49 Uhr

  • Versuchen Sie für den Stil, sich zu ändern pointer-events:none; zu pointer-events:unset;. Dann kann der Cursor zu geändert werden cursor:not-allowed;. Dies gibt dem Benutzer einen besseren Hinweis darauf, was vor sich geht. Scheint ab heute in FF, Edge, Chrome, Opera und Brave zu funktionieren.

    – Sablefoste

    5. September 2017 um 1:17 Uhr

  • @Sablefoste Das funktioniert bei mir in Chrome 60 nicht. Der Cursor ist in der Tat not-allowedaber der Link bleibt anklickbar.

    – Suppenhund

    11. September 2017 um 20:19 Uhr

So deaktivieren Sie einen Link nur mit CSS
Nickf

CSS kann nur verwendet werden, um den Stil von etwas zu ändern. Das Beste, was Sie wahrscheinlich mit reinem CSS tun können, ist, den Link vollständig auszublenden.

Was Sie wirklich brauchen, ist etwas JavaScript-Code. So würden Sie mit der jQuery-Bibliothek tun, was Sie wollen.

$('a.current-page').click(function() { return false; });

  • Vergessen Sie nicht, Standardverhalten zu verhindern: function(ev){ ev.preventDefault(); ev.stopPropagation(); return false;.

    – ungleich

    8. Juni 2012 um 15:22 Uhr

  • @Idiqual, return false macht das

    – Nickf

    9. Juni 2012 um 8:38 Uhr

  • return false funktioniert nur, wenn die Aktion mit gesetzt wird href Attribut

    – Justin

    21. Juni 2012 um 17:40 Uhr


  • Auch diese Version kann verwendet werden, um Klicks zu deaktivieren, während andere Zeigerereignisse wie :hover oder :focus! Top-Antwort!

    – Charlie Tupmann

    5. Mai 2015 um 17:07 Uhr

  • Dies funktioniert zwar in allen Browsern, verhindert aber nur das Anklicken eines Links. Denken Sie daran, dass viele Benutzer es gewohnt sind, Links über das Kontextmenü oder die Verwendung der mittleren Maustaste zu öffnen.

    – Alexandru Severin

    2. August 2017 um 12:38 Uhr

1646307729 306 So deaktivieren Sie einen Link nur mit CSS
Erleichterung

CSS kann das nicht. CSS dient nur der Präsentation. Ihre Optionen sind:

  • Schließen Sie nicht die ein href Attribut in Ihrem <a> Stichworte.
  • Verwenden Sie JavaScript, um damit die Ankerelemente zu finden classund entfernen Sie ihre href oder onclick Attribute entsprechend. jQuery würde Ihnen dabei helfen (NickF hat gezeigt, wie man etwas Ähnliches, aber besser macht).

1646307729 568 So deaktivieren Sie einen Link nur mit CSS
Jigar Bhatt

Bootstrap-deaktivierter Link

<a href="#" class="btn btn-primary btn-lg disabled" role="button">Primary link</a>

<a href="#" class="btn btn-default btn-lg disabled" role="button">Link</a>

Bootstrap Disabled Button, aber es sieht aus wie ein Link

<button type="button" class="btn btn-link">Link</button>

1646307730 89 So deaktivieren Sie einen Link nur mit CSS
Peter Mortensen

Sie können die einstellen href zuschreiben javascript:void(0):

.disabled {
  /* Disabled link style */
  color: black;
}
<a class="disabled" href="https://stackoverflow.com/questions/2091168/javascript:void(0)">LINK</a>

1646307730 89 So deaktivieren Sie einen Link nur mit CSS
Peter Mortensen

Ich benutzte:

.current-page a:hover {
    pointer-events: none !important;
}

Und das war nicht genug; In einigen Browsern wurde der Link immer noch blinkend angezeigt.

Ich musste hinzufügen:

.current-page a {
    cursor: text !important;
}

  • Ich denke a[disabled]:active { pointer-events: none !important; } ist besser.

    – Masamoto Miyata

    13. April 2019 um 16:18 Uhr

923010cookie-checkSo deaktivieren Sie einen Link nur mit CSS

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy