工具提示 class 被神秘覆盖

Question

所以我认为将工具提示添加到我的 Neocities 网站是个好主意，但我似乎运行遇到了一个我找不到答案的问题...

好吧，出于某些不敬虔的原因，我的工具提示 class 无法正常工作。我将 div 分配为 class，其中的跨度为工具提示文本 class，但它仍将仅使用我分配的 body。我只是在文本仍然是白色的时候才注意到这一点，当它应该是黑色的时候，除其他外。

这是 html 部分：

<h1>please god ignore the background, I haven't found a good one yet</h1>
      
<img id="A wooden door framed with clip-art of flowers." style="position: relative;" src="images/flowerydoor.png" />
      
<div class="tooltip">
  <p>this is literally copy+pasted from w3schools what the actual fuck-
      <span class="tooltiptext">wait a minute this should have black text why isn't the class working</span></p>
</div>

我将 header 和图像部分包括在内，因为我很绝望，担心答案就在其中一个微小的细节中

这是样式表：

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

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: white;
  color: black;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;

  position: absolute;
  z-index: 1;
}

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

body {
  background-color: #fbb291;
  color: white;
  font-family: Verdana;
}

再次从 w3schools 复制粘贴所有内容，以确保不是我

正如我所说，tooltip-assigned div 的文本仍然是白色文本，工具提示中没有任何内容 class...

要么是 body 覆盖了我的 class，要么是 class 本身发生了一些问题，导致它无法工作。

我不知道这是否有帮助，但我已经为我的 body 分配了一个 class，它工作得很好。我想知道是否有什么事情发生了？我的意思是，它不应该，因为我有另一个页面使用 class，还有 divs 使用其他 classes，它们工作得很好！

.door {
  
  margin: 0 auto;
  
  background-image: url("https://64.media.tumblr.com/1adbeafb3ca992a7681ede48ddedcbbd/d5886a952040c00b-9b/s250x400/a917bb1772111a1460eac4922c0502e0ba860bd1.jpg");
  /*position: relative;*/
  width: 600px;
  height: 900px;
  
  text-align: center;
  
  }

如果我说的不太清楚，我深表歉意，我对某些 html 和 css 术语不是很熟悉。

Answer 1

在此基于您的代码的代码段中，工具提示文本为黑色：

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

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: white;
  color: black;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;

  position: absolute;
  z-index: 1;
}

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

body {
  background-color: #fbb291;
  color: white;
  font-family: Verdana;
}

<h1>please god ignore the background, I haven't found a good one yet</h1>
      
<img id="A wooden door framed with clip-art of flowers." style="position: relative;" src="images/flowerydoor.png" />
      
<div class="tooltip">
  <p>this is literally copy+pasted from w3schools what the actual fuck-
      <span class="tooltiptext">wait a minute this should have black text why isn't the class working</span></p>
</div>

如果您将其他库与自己的 CSS 一起使用，或者将其部署在 third-party 网站上，则可能会发生命名空间冲突。您可以使用 Chrome DevTools 或其他浏览器中的类似工具检查哪些样式应用于 HTML 元素。这是 Chrome 中执行此操作的指南：https://developer.chrome.com/docs/devtools/css/overrides/

工具提示 class 被神秘覆盖

Tooltip class mysteriously overridden

html

css

tooltip