How to get a “not-allowed” cursor on a disabled link

user_14062663 0
Viewed 1335

I was wondering how to get a not-allowed cursor on my disabled link. I've tried to add it to the disabled event but it wouldn't work there, then I tried to introduce a hover effect with the same cursor event. Any ideas on how to get that to work? I've included my code CSS here:

.disabled {
pointer-events: none;
cursor: not-allowed;
text-decoration: none;
color: rgba(255, 255, 255, 0.25);
}

.disabled:hover {
    cursor: not-allowed;
}

and my HTML here:

<li><a href="index.html" class="disabled">Home</a></li>
css html
4 Answers

You'll have to remove pointer-events: none; to make this work.

body {
  background: #555;
}

.disabled {
  /* pointer-events: none; */ /* removed */
  text-decoration: none;
  color: rgba(255, 255, 255, 0.25);
}

.disabled:hover {
  cursor: not-allowed;
}
<ul>
  <li><a href="index.html" class="disabled">Home</a></li>
</ul>

user_47396280

Once pointer-events: none; is removed, the cursor: not-allowed should work already. 

.disabled {
cursor: not-allowed;
text-decoration: none;
color: black;
}

.disabled:hover {
    cursor:not-allowed;
}
<li><a href="index.html" class="disabled">Home</a></li>

user_115857960

Try to remove the "pointer-events: none;"

user_47807670

You need to remove pointer-events: none, that prevents cursor: not-allowed from showing correctly

user_97313630
Related