更改位置为“绝对”悬停时（显示完整措辞）

Question

有一组按行排列的链接。

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）？ 提前致谢！

Answer 1

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

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>

Answer 2

我不明白为什么你希望它接收绝对位置，这与单词的大小有什么关系，等等。

好吧，我看到你的例子在这里工作 http://jsfiddle.net/R6dkJ/ 在 Firefox 上。

要“正确”地执行此操作，您可以这样做：

a.trick:hover{white-space:nowrap;}

这可以达到相同的效果。

absolute 属性用于定位元素本身。当然，您可以将它用于像这样的黑客以获得一些想要的效果 - 但当您这样做时，您肯定会遇到浏览器之间的不兼容问题。

Answer 3

使用一些 jQuery 解决了这个问题，即：

$('.trick').mouseover(function(){$(this).css('position','absolute');});
$('.trick').mouseout(function(){$(this).css('position','relative');});

出于某种原因，Chrome/Safari 想要额外确认该位置实际上应该成为绝对:)。
现在可以在任何地方使用（包括 IE）。

感谢您的参与，并享受这个美好的“黑客”:)。