问题描述
不知道我到目前为止有什么:
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:中心工具提示文字上方悬停的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!