html - 从工具提示中删除下划线和链接

Question

我尝试用图片实现工具提示。这样可行。但是我有两个问题:

1. 如果我将鼠标移到单词 TooltipText 上，则应该只显示一条虚线。但是这个词也有下划线(因为链接)。
2. 我想禁用该链接，因为它是一个工具提示。 CSS 属性 'pointer-events: none;'禁用链接，但随后工具提示不起作用。

HTML:

<div class="col-lg-4">
    <a href="#">
        <div class="hover-img"><strong class="dotted">TooltipText</strong><span><img src="https://via.placeholder.com/350x150"/></span></div>
    </a>
</div>

CSS:

a .hover-img {
    position:relative;
}
a .hover-img span {
    position:absolute; left:-9999px; top:-9999px; z-index:9999;
    border: 2px solid #000;

}
a:hover .hover-img span {
    top: 40px;
    left: 0;
}
.dotted {
    color: #4e555b;
    border-bottom: 2px dashed #4e555b;
    text-decoration: none!important;
}
.dotted:hover {
    text-decoration: none!important;
}

JSFiddle:

https://jsfiddle.net/kdzb108h/

Answer 1

添加这个:

 a  {
   text-decoration: none;
 }

text-decoration应直接应用于 <a> ，而不是它的子标签。

引用: https://jsfiddle.net/ewtysb4c/