时间戳

首页 > 解决方案 > 禁用 Anchor 标签并在鼠标悬停时显示 title-msg 为什么它被禁用

html - 禁用 Anchor 标签并在鼠标悬停时显示 title-msg 为什么它被禁用

问题描述

我想禁用 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 做到这一点？

标签： htmlcss

解决方案

您可以让一个: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>

推荐阅读