Question

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

如果我将鼠标移到TooltipText单词上，则仅应显示一条虚线。但是这个词也带有下划线（因为链接）。
我想禁用该链接，因为它是一个工具提示。 CSS属性'pointer-events：none;'禁用链接，但工具提示不起作用。

HTML：

vec1 = tf.Variable([1., 2., 3.])
vec2 = tf.Variable([0.], trainable=False)
vec3 = tf.Variable([5., 6., 7.])

vec = tf.concat([vec1, vec2, vec3], axis=0)

CSS：

<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>

JSFiddle：

https://jsfiddle.net/kdzb108h/

Answer 1

添加此内容：

 a  {
   text-decoration: none;
 }

text-decoration应该直接应用于<a>，而不是其子标记。

参考： https://jsfiddle.net/ewtysb4c/

Answer 2

该单词带有下划线是因为<a>标签具有href属性。如果删除该属性，则两个下划线都将消失并且链接将被禁用。

但是，光标也不会像链接一样。您可以在text-decoration: none标签中强制使用<a>，并在cursor: pointer规则中添加a:hover。我建议您创建一个a.tooltip-link类，并向其中添加这些样式，这样它们就不会应用于您页面中的所有<a>标签。

Answer 3

.dotdot类将应用于'strong'元素，该元素不具有text-decoration属性。您需要将一个类应用于'a href =“＃”'标记并设置文本修饰：none;在该元素上。

Answer 4

因此，首先要解释几件事。您用作容器，出了什么问题。如果您看到任何年份的w3.org文档，您将看到该链接为嵌入式文档。这里的链接：https://www.w3.org/TR/html401/struct/global.html#h-7.5.3说，内联元素只能包含其他内联元素或文本。第二件事。我宁愿采用这种结构：

<div class="wrapper objects">
  <div class="object">
    <p class="tooltip-provoke">Tooltip Text</p>
    <div class="tooltip-text">
      <img src="https://via.placeholder.com/350x150"/>  
    </div>
  </div>
</div>

可以设置div.tooltip-text display:block，然后将其悬停p.tooltip-provoke进行更改。通过在CSS（'.a + .b'）中使用+，您可以说是将样式应用于class =“ a”且仅当class =“ b”之后的第一个元素。您可以在此处查看示例：https://jsfiddle.net/0pmknx4g/9/

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

4 个答案: