当文本悬停在仅使用 css 时如何使标签弹出答案

【问题标题】：How to make label pop up when text hovered over using css only当文本悬停在仅使用 css 时如何使标签弹出
【发布时间】：2021-09-20 12:46:42
【问题描述】：

我在页面左侧有一个链接列表。我想改进此列表，以便当我将光标放在此列表中的某个项目上时，会出现某种标签，该标签会简要说明链接指向的内容。有问题的 html 是使用来自 AsciiDoc 源的 Antora 自动生成的，据我所知，我所能做的就是为链接文本的不同部分添加一个 css 类或 id，这些部分以粗体显示。我无法添加任何 Javascript 或嵌套的 css 类。

所以这是我的尝试：

<!DOCTYPE html>
<html>
<head>
<style>

#Bob.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}

#Bob.tooltiptext {
  font-size: 5px;
}

#Bob.tooltiptext:hover {
  visibility: visible;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  font-size: 10px;
  /* Position the tooltip */
  position: absolute;
  z-index: 1;
}
</style>
<title>Page Title</title>
</head>
<body>

<a href="http://www.bob.com" class="searchEngineLink" >
<strong id="Bob" class="tooltip">Bob</strong> 
<strong id="Bob" class="tooltiptext">What a great guy!</strong>
</a>

</body>
</html>

这显然没有达到我想要的效果。它所做的只是有一个小字体的文本，当我把它翻过来时，它会在一种盒子里变成一个更大的字体。

如果有人能想到某种方式让标签在页面中的某个链接上弹出，即使使用一些我没有想到的完全不同的方法，我将不胜感激。请注意，我将有大约 200 个链接，所以如果我可以有一个解决方案，不需要我为每个链接的每个不同 id 都拥有一组 css 属性，那将是可取的。

如果这个问题有任何不清楚的地方，请随时问我。

【问题讨论】：

在<a> 标签内添加title 属性怎么样。这是你需要的吗？还是您需要自定义弹出窗口？

标签： html css asciidoc antora

【解决方案1】：

简单的tooltip可以通过使用title属性实现：当鼠标移到元素上时，信息显示为tooltip文本。

<a href="http://www.bob.com" class="searchEngineLink" title="What a great guy!">
<strong id="Bob" class="tooltip">Bob</strong> 
</a>

您还可以制作自己的自定义工具提示，使用content 属性插入生成的内容。（每个链接的说明）。

.searchEngineLink {
  display: inline;
  position: relative;
}

.searchEngineLink:hover:after {
  background: #eee;
  
  border-radius: 5px;
  bottom: -34px;
  color: black;
  content: attr(gloss);
  left: 20%;
  padding: 5px 15px;
  position: absolute;
  z-index: 98;
  width: auto;
  white-space:nowrap;
}

.searchEngineLink:hover:before {
  border: solid;
  border-color: #ddd transparent;
  border-width: 0 6px 6px 6px;
  bottom: -4px;
  content: "";
  left: 40%;
  position: absolute;
  z-index: 99;
}

<a class="searchEngineLink"  gloss="What a great guy" href="http://www.bob.com">Bob</a>

<a class="searchEngineLink"  gloss="What a smart guy" href="http://www.bob.com">Bob2</a>

<br>

<a class="searchEngineLink"  gloss="What a handsome guy" href="http://www.bob.com">Bob3</a>

【讨论】：

感谢您的建议。但是，我无法将任何新的 html 标签（例如“gloss”或“title”）添加到现有的 html 标签中。
我明白了，抱歉我错过了。您是否尝试过使用this。但这仍然需要每个链接都有唯一的跨度（每个链接的描述不同）。
嗨，每个链接都有一个唯一的跨度意味着它在我的情况下不可行（我将至少有 600 个这样的链接，并且会定期添加和删除新链接，所以我必须不断更新css属性以反映它）。