悬停在文本上时弹出答案

【问题标题】：Popup when hover on text悬停在文本上时弹出
【发布时间】：2021-07-21 22:15:04
【问题描述】：

我试图在将鼠标悬停在我的文本（跨度）上时添加一个弹出窗口。我正在尝试像他们在 W3schools 中解释的那样： https://www.w3schools.com/css/css_tooltip.asp

但是我已经在跨度中使用样式来为要悬停的文本着色，所以如果我将具有 w3schools 属性的类添加到跨度中，文本将被隐藏，因为它们具有可见性：隐藏；在 span 类中。

我对此很陌生，所以如果有人可以帮助我，我会很高兴。

【问题讨论】：

您必须向我们展示您的代码，以便我们提供帮助
这是我尝试添加悬停的跨度文本：我的文本所以如果我添加一个类使用 w3schools 在此范围内的属性，它将不可见，因为 w3schools 中的代码具有可见性：隐藏；在跨度类中。

【解决方案1】：

如果您想为跨度文本（我的文本）添加颜色，请在 w3schools 示例中向 .tooltip 类添加颜色属性但是，如果您的目标是为工具提示文本添加颜色，请调整 .tooltip .tooltiptext{} 中的颜色属性这是来自 w3schools 的相同示例

.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
  /* color of the span text */
  color: rgb(119, 162, 241);
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  /* color of the tooltip text */
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}

<div class="tooltip">Hover over me
  <span class="tooltiptext">My text</span>
</div>

【讨论】：

【解决方案2】：

我对 HTML 和 CSS 也很陌生，但无论如何我都会尝试回答。

您可以尝试嵌套跨度...

以 W3Schools 的代码为例，如下所示：

.p {
  text-align: left;
}
    
.firstSpan {
  color: rgb(119, 162, 241)
}
    
.firstSpan .secondSpan {
  visibility: hidden;
  width: 120px;
  background-color: gray;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
}
    
.firstSpan:hover .secondSpan {
  visibility: visible;
}

<p>Let's try some 'nested' spans.</p>
<p>This is some text in a paragraph. You can hover <span class="firstSpan">over me<span class="secondSpan">Some text.</span></span> and you'll see some text. 
</p>
<p>Another text in another paragraph. Hover <span class="firstSpan">over me<span class="secondSpan">A hint.</span></span> and you'll see some text — Maybe a hint. 
</p>

根据您的需要，嵌套跨度可能不是最佳实践，但如果您正在寻找的是一个简单的内联容器......那就去吧。

希望我对您有所帮助。 ?

【讨论】：