javascript - HTML/CSS 跨度弹出显示不响应

Question

我正在尝试制作一个 Chrome 扩展，当鼠标悬停在 p、h1 等上时，将显示一个带有该元素的 font-family 的弹出窗口。它在大多数情况下都有效，但有时无法正确显示，如下图所示。

如何设置 CSS 样式，使其绝对定位并始终扩展以适合文本并完全可见？该扩展通过使用 appendChild 将包含隐藏弹出窗口的范围添加到当前元素来工作。

请注意在第二张图片中，弹出窗口由于其父级的约束而被 chop 。

CSS:

.crx_mouse_visited:hover .popup {
  visibility: visible;
}

.popup {
  display: block;
  position: absolute;
  width : 100%;
  height: auto;
  z-index: 100;
  visibility: hidden;
  font-size: 15px;
  background-color: #333;
  color: #fff;
  border-radius: 4px;
  padding: 5px 0;
}

Answer 1

这应该可以...

.crx_mouse_visited:hover .popup {
  visibility: visible;
}

.popup {
  display: block;
  position: absolute;
  z-index: 100;
  visibility: hidden;
  font-size: 15px;
  background-color: #333;
  color: #fff;
  border-radius: 4px;
  padding: 5px;
}