On my webpage, I have a table cell with an image that should only display when hovering over the cell. The problem is that when the image is shown, it shifts the other text to the left because its default state is "display:none". I'm searching for a solution to prevent this.
The image in the table cell is positioned on the top right using the following code:
<td class="tableCell">
<span class="cellMenu">
<img src="/Icons/arrow_down.png" class="seatMenuArrow">
</span>
A bunch of other text that is all center aligned
</td>
Below is the CSS that places the cellMenu image at the top right.
.cellMenu
{
display:none;
float:right;
cursor: pointer;
}
To show the image only on hover, I am using the following jQuery:
$('.tableCell').live('hover', function () {
$(this).toggleClass("hover").find(".cellMenu").toggle();
});
While this method works, the other centered text moves when the image is displayed. How can I ensure that only the image is shown without affecting the alignment of the surrounding text?