Disable link inside

Question

I have the following HTML:

<li>
   <a href="mylink">Some text</a>
</li>

I am trying to disable the link via CSS on the parent <li> element but to no avail.

<li class="disabled">
   <a href="mylink">Some text</a>
</li>

And the CSS I have tried:

li.disabled {
  pointer-events: none;
  cursor: default;
  opacity: 0.6;
}

li.disabled:hover {
  pointer-events: none;
  cursor: default;
  opacity: 0.6;
}

I have also tried:

li.disabled a {
  pointer-events: none;
  cursor: default;
  opacity: 0.6;
}

li.disabled a:hover {
  pointer-events: none;
  cursor: default;
  opacity: 0.6;
}

Works in Firefox too. *EDIT:* Doesn't work in Microsoft Edge. — Emanuel Vintilă, Apr 11 '16 at 19:13
Thanks guys, I guess delirium and insanity setting in. I will go to sleep now and try again tomorrow. — TheRealPapa, Apr 11 '16 at 19:18
Putting [this link](http://stackoverflow.com/a/10276157/4808244) here for completeness. — Scott Forsythe, Apr 24 '16 at 23:47

score 0 · Answer 1 · answered Apr 11 '16 at 19:19

According to CanIUse, chrome doesn't support pointer-event, thus this work around should help you out:

HTML

<ul>
  <li class="disabled">
   <a href="http://google.com">Some text</a>
</li>
</ul>

CSS

li.disabled a {
  cursor: default;
  opacity: 0.6;
}
li.disabled{
  position: relative;
}
li.disabled:before{
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 1;
  content: "";
  opacity: 0;
}

JSFiddle

Disable link inside

1 Answers1