如何定位隱藏的對話氣泡

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

從a標籤

從標籤更改position:relative到您的DIV容器允許刪除position:relative您絕對定位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; 
}