纯CSS：中心工具提示文字上方悬停 [英] Pure CSS: Center Tooltip Above Text On Hover

问题描述

不知道我到目前为止有什么： http://jsbin.com/udegux/1/edit

Fiddle to see what I have so far: 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;
}

正如你所看到的，我目前手动将鼠标悬停在文本，通过指定顶部和左属性。如果文本更长或更短，我必须手动更改这些值，使提示看起来居中。

As you can see, I am currently manually centering the hover drag tip over the text by specifying the "top" and "left" attributes. If the text was longer or shorter, I would have to manually change those values to make the tip look centered.

我正在寻找一种方法来自动将单词

I am looking for a way to automatically center the word "drag" above the phrase "Mouse and drag" using pure CSS.

推荐答案

如果将块放在文本的顶部，上面并设置 text-align：center ，不应该有任何需要使用JavaScript。

If you position the block on top of the text and above and set text-align: center, there shouldn't be any need to use JavaScript.

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

JSBin 。

这篇关于纯CSS：中心工具提示文字上方悬停的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！