css - 纯 CSS：悬停时文本上方的中心工具提示

Question

小提琴看看我到目前为止有什么：http: //jsbin.com/udegux/1/edit

HTML

<span id="test" class="drag-hint"><span>drag</span>Mouse and drag</span>

CSS：

.drag-hint {
  position:relative;
}
.drag-hint > span{
  display:none;
}
.drag-hint:hover > span {
  display:inline;
  position:absolute;
  top: -25px;
  left: 30px;
}

如您所见，我目前通过指定“top”和“left”属性手动将悬停拖动提示居中于文本上方。如果文本更长或更短，我将不得不手动更改这些值以使提示看起来居中。

我正在寻找一种使用纯 CSS 自动将“拖动”一词居中在短语“鼠标和拖动”上方的方法。

Answer 1

如果您将块放置在文本顶部和上方并设置text-align: center，则不需要使用 JavaScript。

.drag-hint:hover > span {
  display: inline;
  position:absolute;
  top: -25px;
  left: 0;
  right: 0;
  text-align: center;
}

杰宾。