禁用锚标记，并在鼠标悬停时显示title-msg为何禁用

Question

我想禁用Anchor标签，并在鼠标悬停时显示标题，为什么将其禁用？

<a href="domain.xyz" title="why it's disabled">sample domain</a>

尝试以下：

.disabled {
    opacity: 0.5;
    cursor: default !important;
    pointer-events: none !important;
}

但鼠标悬停不起作用。

任何指针如何使用css做到这一点？

Answer 1

您可以在:after中显示一个content: attr(title)元素以显示原因。

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

a.disabled:hover::after {
 content: attr(title);
 padding-left: 10px;
 color: black;
}

<a href="#" class="disabled" title="Unavailable now" onclick="return false">Click here</a>