我正在构建我的第一个网站,当您将鼠标悬停在这样的图像上时,我会出现一些隐藏的对话气泡 demo
但是我不知道如何影响对话泡泡的定位测量,我怎样才能使对话泡泡在它下面的框的中心对齐?
任何帮助将不胜感激!
HTML:
<div id="container"><a href="#" class="hoverbubble">Hover over me!<span>Hidden message here.</span></a></div>
CSS:
#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
至 position:relative
删除 position:relative
来自你的 a
标记
改变 position:relative
从你的 a 标签到你的 div 容器将允许你绝对定位 span
相对于容器而不是 a
对齐标签。
设置你的span
至 position:absolute
对齐你的 span
通过编辑值 top:40%; left: 11%;
您现在可以定位您的 span
相对于您的容器的元素。
关于html - 如何定位隐藏的对话泡泡,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22985538/