时间戳

首页 > 解决方案 > 悬停在文本上时弹出

html - 悬停在文本上时弹出

问题描述

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

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

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

标签： htmlcsspopuphover

解决方案

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

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

我希望我是有帮助的。

推荐阅读