Html 如何定位隐藏的语音气泡
我正在建立我的第一个网站,当你们像这样悬停在图片上时,我有一些隐藏的语音泡泡出现 但是,我不知道如何影响语音气泡的定位测量,如何使语音气泡在它下面的框的中心对齐 任何帮助都将不胜感激 HTML:Html 如何定位隐藏的语音气泡,html,css,hover,position,Html,Css,Hover,Position,我正在建立我的第一个网站,当你们像这样悬停在图片上时,我有一些隐藏的语音泡泡出现 但是,我不知道如何影响语音气泡的定位测量,如何使语音气泡在它下面的框的中心对齐 任何帮助都将不胜感激 HTML: 假设隐藏消息将以链接为中心 HTML <div id="container"> <a href="#" class="hoverbubble">Hover over me! <span>Hidden message here.</spa
假设隐藏消息将以链接为中心 HTML
<div id="container">
<a href="#" class="hoverbubble">Hover over me!
<span>Hidden message here.</span>
</a>
</div>
将容器
div
设置为position:relative
从a
标记中删除position:relative
将position:relative
从a标记更改为div容器将允许绝对定位的span
相对于容器而不是a
标记对齐
将span
设置为position:absolute
通过编辑值top:40%,对齐span
;左:11%代码>
现在可以相对于容器定位span
元素
如果气泡位于框的中心,那么()我会如何影响固定高度的语音气泡,文本会溢出?你能给我发一份关于这个问题的JSFIDLE,我来看看吗?可能overflow:hidden
会有帮助吗?去掉white space:nowrap代码>从a.hoverbubble:hover span
这将排序宽度。要使框跨越文本的高度,只需取出height:100px
froma.hoverbubble:hover span
see my fiddle以获取有关更改的注释,请参阅以获取有关css属性的更多信息white space
#container {
background-color: #FF0;
margin: 100px;
float: left;
height: 200px;
width: 200px;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
}
a.hoverbubble {
position: relative;
text-decoration: none;
}
a.hoverbubble span {display: none;
}
a.hoverbubble:hover span {
display: block;
position: absolute;
padding: .5em;
content: attr(title);
min-width: px;
text-align: center;
width: auto;
height: auto;
white-space: nowrap;
top: -40px;
background: rgba(0,0,0,.8);
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
color: #fff;
font-size: 0.86em;
font-family: Arial, Helvetica, sans-serif;
}
a.hoverbubble:hover span:after {
position: absolute;
display: block;
content: "";
border-color: rgba(0,0,0,.8) transparent transparent transparent;
border-style: solid;
border-width: 10px;
height: 0;
width: 0;
position: absolute;
bottom: -20px;
left: 1em;
}
<div id="container">
<a href="#" class="hoverbubble">Hover over me!
<span>Hidden message here.</span>
</a>
</div>
#container {
background-color: #FF0;
margin: 100px;
float: left;
height: 200px;
width: 200px;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
}
a.hoverbubble {
position: relative;
text-decoration: none;
background-color: lightblue;
}
a.hoverbubble span {display: none;}
a.hoverbubble:hover span {
display: block;
position: absolute;
padding: .5em;
text-align: center;
width: auto;
height: auto;
white-space: nowrap;
top: -40px;
left:50%; /* push the block halfway over to the right */
-webkit-transform:translate(-50%, 0); /* move it back left half it's own width */
background: rgba(0,0,0,.8);
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
color: #fff;
font-size: 0.86em;
font-family: Arial, Helvetica, sans-serif;
}
a.hoverbubble:hover span:after {
position: absolute;
display: block;
content: "";
border-color: rgba(0,0,0,.8) transparent transparent transparent;
border-style: solid;
border-width: 10px;
height: 0;
width: 0;
position: absolute;
bottom: -20px;
left: 1em;
}