如何在纯 CSS 中将鼠标悬停在文本上时创建一个框？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10243440/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to create a box when mouse over text in pure CSS?
提问by Rohit Azad
I have tried many times to do this, but it has not worked out yet.
我已经尝试过很多次这样做，但还没有成功。
When I mouse over this text
当我将鼠标悬停在此文本上时
Then it must show me this box
然后它必须给我看这个盒子
I want to achieve this effect purely with CSS if anybody can do this.
如果有人可以做到这一点，我想纯粹用 CSS 来实现这种效果。
回答by sandeep
You can write like this:
你可以这样写：
CSS
CSS
span{
background: none repeat scroll 0 0 #F8F8F8;
border: 5px solid #DFDFDF;
color: #717171;
font-size: 13px;
height: 30px;
letter-spacing: 1px;
line-height: 30px;
margin: 0 auto;
position: relative;
text-align: center;
text-transform: uppercase;
top: -80px;
left:-30px;
display:none;
padding:0 20px;
}
span:after{
content:'';
position:absolute;
bottom:-10px;
width:10px;
height:10px;
border-bottom:5px solid #dfdfdf;
border-right:5px solid #dfdfdf;
background:#f8f8f8;
left:50%;
margin-left:-5px;
-moz-transform:rotate(45deg);
-webkit-transform:rotate(45deg);
transform:rotate(45deg);
}
p{
margin:100px;
float:left;
position:relative;
cursor:pointer;
}
p:hover span{
display:block;
}
HTML
HTML
<p>Hover here<span>some text here ?</span></p>
Check this http://jsfiddle.net/UNs9J/1/
回答by Shailender Arora
You can easily make this CSS Tool Tipthrough simple code :-
您可以通过简单的代码轻松制作此CSS 工具提示：-
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
a.info{
position:relative; /*this is the key*/
color:#000;
top:100px;
left:50px;
text-decoration:none;
text-align:center;
}
a.info span{display: none}
a.info:hover span{ /*the span will display just on :hover state*/
display:block;
position:absolute;
top:-60px;
width:15em;
border:5px solid #0cf;
background-color:#cff; color:#000;
text-align: center;
padding:10px;
}
a.info:hover span:after{ /*the span will display just on :hover state*/
content:'';
position:absolute;
bottom:-11px;
width:10px;
height:10px;
border-bottom:5px solid #0cf;
border-right:5px solid #0cf;
background:#cff;
left:50%;
margin-left:-5px;
-moz-transform:rotate(45deg);
-webkit-transform:rotate(45deg);
transform:rotate(45deg);
}
</style>
</head>
<body>
<a href="#" class="info">Shailender Arora <span>TOOLTIP</span></a>
</div>
</body>
</html>
回答by Ankit
You can also do it by toggling between display: blockon hover and display:nonewithout hover to produce the effect.
您还可以通过在display: blockon hover 和display:none之间切换来实现，无需悬停即可产生效果。
回答by Chris
This is a small tweak on the other answers. If you have nested divs you can include more exciting content such as H1s in your popup.
这是对其他答案的一个小调整。如果您有嵌套的 div，您可以在弹出窗口中包含更多令人兴奋的内容，例如 H1。
CSS
CSS
div.appear {
width: 250px;
border: #000 2px solid;
background:#F8F8F8;
position: relative;
top: 5px;
left:15px;
display:none;
padding: 0 20px 20px 20px;
z-index: 1000000;
}
div.hover {
cursor:pointer;
width: 5px;
}
div.hover:hover div.appear {
display:block;
}
HTML
HTML
<div class="hover">
<img src="questionmark.png"/>
<div class="appear">
<h1>My popup</h1>Hitherto and whenceforth.
</div>
</div>
The problem with these solutions is that everything after this in the page gets shifted when the popup is displayed, ie, the rest of the page jumps downwards to 'make space'. The only way I could fix this was by making position:absolute and removing the top and left CSS tags.
这些解决方案的问题在于，当显示弹出窗口时，页面中此后的所有内容都会移动，即页面的其余部分向下跳转以“腾出空间”。我可以解决这个问题的唯一方法是制作 position:absolute 并删除顶部和左侧的 CSS 标签。
回答by Jesus D.
Exactly what they said, it will work.
正是他们所说的，它会起作用。
In the parent element stablish a max-height.
在父元素中建立一个最大高度。
I'm taking sandeepexample and adding the max-height and if required you can add max-width property. The text will stay where It should stay (If possible, in some cases you will need to change some values to make it stay in there)
我正在以sandeep为例并添加最大高度，如果需要，您可以添加最大宽度属性。文本将停留在它应该停留的地方（如果可能，在某些情况下，您需要更改一些值以使其停留在那里）
span{
background: none repeat scroll 0 0 #F8F8F8;
border: 5px solid #DFDFDF;
color: #717171;
font-size: 13px;
height: 30px;
letter-spacing: 1px;
line-height: 30px;
margin: 0 auto;
position: relative;
text-align: center;
text-transform: uppercase;
top: -80px;
left:-30px;
display:none;
padding:0 20px;
}
span:after{
content:'';
position:absolute;
bottom:-10px;
width:10px;
height:10px;
border-bottom:5px solid #dfdfdf;
border-right:5px solid #dfdfdf;
background:#f8f8f8;
left:50%;
margin-left:-5px;
-moz-transform:rotate(45deg);
-webkit-transform:rotate(45deg);
transform:rotate(45deg);
}
p{
margin:100px;
float:left;
position:relative;
cursor:pointer;
max-height: 10px;
}
p:hover span{
display:block;
}
max-height in the pparagraph, second to last one, last line.
p段落中的 max-height ，倒数第二，最后一行。
Test it before rating it useless.
在评价它无用之前测试它。
