Question

我正在构建我的第一个网站，当你将鼠标悬停在这样的图像上时，我会出现一些隐藏的语音气泡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;
}

Answer 1

将容器div设置为position:relative

从position:relative代码中删除a

将position:relative从您的标记更改为div容器，这样您的绝对定位span就可以相对于容器而不是a标记进行对齐。

将span设置为position:absolute

通过修改值span

来对齐top:40%; left: 11%;

您现在可以相对于容器定位span元素。

http://jsfiddle.net/e4q7K/18/

Answer 2

假设隐藏的消息要以链接为中心..

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

如何定位隐藏的语音泡沫

2 个答案: