Change <a> position to "absolute" on hover (to display full wording)

Have a set of links in rows.

CSS:

.table div {
    float:left;
    margin-right:5px;
    width:150px; /*width needs to be fixed, since we're limited in spa开发者_如何学运维ce*/
    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>

Works great in Opera and Firefox (on hover overlaps the next "column", displaying full content).

In Chrome (Safari too, likely) does not react to :hover at all.

Anyone knows a way to bypass, preferably without JS/jQ (pure CSS)? Thanks in advance!

If you are able to determine on the server the maximum number of characters to allow on the link you could use the following strategy:

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>

I don't understand why you want it to receive position absolute, what that has got to do with the size of the words, etc..

Ok, I saw your example working here http://jsfiddle.net/R6dkJ/ on firefox.

To do this exact thing "correctly", you would for an example do this:

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

This achieves the same effect.

The absolute property is used for positioning the element itself. Of course you can use it for hacks like this to get some desired effect - but you will most definitely run into incompatibilities between browsers when you do so.

Solved with a bit of jQuery, which is:

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

For some reason Chrome/Safari want additional affirmation that position actually should become absolute :). Now works everywhere (including IEs).

Thanks for participation, and enjoy this nice "hack" :).