html - 禁用 anchor 标记并在鼠标悬停时显示 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>