css - CSS：如何将提示框（a：hover）向左移动？

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 代码，提示在span标签之间，在元素内部：

<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 属性将提示框从链接的右侧（默认位置）移动到左侧？

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

演示

Answer 2

您需要根据您的要求设置margin-left。

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