本文介绍了纯CSS:中心工具提示文字上方悬停的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

不知道我到目前为止有什么:

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;
}

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

08-29 04:41