How to Disable a Link Using Only Css

How to disable a link using only CSS

From this solution:

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

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

Disable Link Using CSS but Enable Title

.disabled-link {  pointer-events: none;}

<span datahover="test" title="My Title"><a href="www.google.com" class="disabled-link">My Link</a></span>

How do I disable an a tag link for a certain child of an element?

One option would be to add a click handler. Like this post talks about, you can tell the browser to follow or not to follow the link by calling e.preventDefault().

In the code below, change disabled and you turn on/off the link.

I should add, though, that while I am not an accessibility expert, this is not very "semantic" and I'm guessing probably doesn't work well with screen readers... Maybe something like aria-disabled could be used to fix that, but I'm not familiar enough with it to say.

var link = document.querySelector('a');var disabled = true;link.addEventListener('click', (e) => {  if (disabled) {    console.log('disabled');    e.preventDefault();  }});

<a href="https://google.com">My link</a>

Disable link in dropdown menu but keep the css

Try this :

<a href='#'>Bewerkingen</a>

You will not need to use

a[href="/test4/disabled"] {
      pointer-events: none;

}

Disabled href tag

There is no disabled attribute for hyperlinks. If you don't want something to be linked then you'll need to remove the <a> tag altogether.

Alternatively you can remove its href attribute - though this has other UX and Accessibility issues as noted in the comments below so is not recommended.

Disable html anchor in Internet Explorer

You can use pointer-events css property to disable the links but they have known issues with ie. Starting from ie 11 this property is supported. There is a little hack. You should add disabled class to links and add disabled attribute to the link then add css that is given below. Also you need to provide pointer-events none for disabled anchor attribute. After these two this should work in most browsers.

a.disabled {
    pointer-events: none;
}

a[disabled] {
    pointer-events: none;
}

See this fiddle.

How to Disable a Link Using Only Css