CSS：如何将提示框（a：悬停）移动到左侧？

Question

我在箱子提示，至极都犯了这样的：

CSS代码：

a span 
{ 
    display:none; 
} 
a:hover span 
{ 
    position:fixed; 
    display:inline; 
    border: 1px solid #0000FF; 
    margin: 0px 0px 0px 10px; 
    padding: 5px; 
    color: #000000; 
    background: #faffc3; 
    opacity:.90; 
} 

HTML代码，提示是跨度之间标签和内部一个元素：

<div> 
    Some text, 
    <a href="#">link<span>Hint.<br>Second line of hint.</span></a> 
    , some text, and another 
    <a href="#">link<span>Hint</span></a>. 
</div> 

是否可以通过使用某些CSS属性将提示框从链接的右侧（默认位置）移动到左侧？

PS。对不起我的英语不好。

Answer 1

a { 
    position:relative; 
} 

a span 
{ 
    display:none; 
} 
a:hover span 
{ 
    position:absolute; 
    display:inline; 
    border: 1px solid #0000FF; 
    margin: 0px 0px 0px 10px; 
    padding: 5px; 
    color: #000000; 
    background: #faffc3; 
    opacity:.90; 
    right:0; 
    margin-right: 105%; 
} 

DEMO

Answer 2

您需要根据您的要求设置保证金余额。

a:hover span 
{ 
    margin-left:-10px; 
} 

见例如

http://jsfiddle.net/dSd2a/3/

Answer 3

我认为这段代码会为你工作：

a{ 
    position: relative; 
} 

a:hover span{ 
    position: absolute; 
    right: 100%; 
} 

跨度将有右边框触及<a>的左边框。如果您为跨度定义宽度，这会更好。

jsFiddle