Question

显示：无； vs可见性：隐藏；

我知道“显示：无；”不会占用空间，并且“可见性：隐藏”；隐藏时会占用空间。

然后，为什么此工具提示定义为“可见性：隐藏；”没有占用空间吗？它的行为就像“显示：无；”

简而言之，工具提示不应与下方的文字重叠，对吗？

.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;

  /* Position the tooltip */
  position: absolute;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}

<!DOCTYPE html>
<html>
<body style="text-align:center;">

<div class="tooltip">Hover over me
  <div class="tooltiptext">Tooltip text</div>
</div>

<p>Note that the tooltip is overlapping the text beneath it. The text should appear below the tooltip position, right?</p>

</body>
</html>

Answer 1

删除这部分代码。然后您会看到差异

/* Position the tooltip */
  position: absolute;

工具提示的CSS可见性规则不起作用

1 个答案: