css - 悬停时将<a>位置更改为“绝对”(以显示完整的措词)

在行中有一组链接。

CSS：

.table div {
    float:left;
    margin-right:5px;
    width:150px; /*width needs to be fixed, since we're limited in space*/
    white-space:nowrap;
    overflow:hidden
}
a.trick,a.trick:link,a.trick:active,a.trick:visited {position:static}
a.trick:hover{position:absolute}

HTML：

<div class=table>
  <div>Text here</div>
  <div><a class=trick href="#">Text here may be too long to fit</a></div>
  <div>Next column</div>
  <div>of my table made of divs</div>
</div>

在Opera和Firefox中效果很好（悬停与下一个“列”重叠，显示全部内容）。

在Chrome中（也可能是Safari）根本不会对：hover做出反应。

有谁知道绕过的方法，最好没有JS / jQ（纯CSS）？
提前致谢！

最佳答案

如果能够确定服务器上允许链接使用的最大字符数，则可以使用以下策略：

CSS：

.table div {
    float:left;
    margin-right:5px;
    width:150px;
    white-space:nowrap;
    overflow:hidden
}
a.trick span.extendedText,
a.trick:link span.extendedText,
a.trick:active span.extendedText,
a.trick:visited span.extendedText {
    display:none;
}
a.trick:hover span.extendedText{
    display:block;
}

HTML：

<div class=table>
    <div>Text here</div>
    <div><a class=trick href="#">Text here may <span class="extendedText">be too long to fit</span></a></div>
    <div>Next column</div>
    <div>of my table made of divs</div>
</div>