时间戳

首页 > 解决方案 > 工具提示的 CSS 可见性规则不起作用

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

问题描述

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

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

那为什么这个工具提示是由“可见性：隐藏；”定义的？不占空间？它的行为类似于“显示：无；”

简而言之，工具提示不应该与它下面的文本重叠，对吧？

.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>

标签： htmlcssvisibilitydisplay

解决方案

删除这部分代码。你会看到区别

/* Position the tooltip */
  position: absolute;

推荐阅读