在不“推”其他元素的情况下切换图像可见性的最佳方法是什么？

Question

我有一个网页，其中有一个表格单元格内的图像，我只想在您将鼠标悬停在单元格上时显示该图像。

我遇到的问题是，当显示图像时，它会将其他文本“推”到左侧（因为默认状态是 display:none”）。我正在寻找一种解决方案

在表格单元格中，我在右上角有一张使用此代码的图像：

 <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>

这是使 cellMenu 图像右上角的 css。

.cellMenu
{
    display:none;
    float:right;
    cursor: pointer;
}

我这样做是为了仅在您将鼠标悬停在单元格上时显示仪器。

$('.tableCell').live('hover', function () {
      $(this).toggleClass("hover").find(".cellMenu").toggle();
});

这可行，但是当显示图像时，“一堆其他全居中对齐的文本”会移动。什么是避免这种移动的正确方法是只显示图像而没有其他移动？

Answer 1

不用 jQuery 也可以：

.cellMenu img
  {
    opacity:0;
    float:right;
    cursor: pointer;
  }

.cellMenu:hover img
  {
     opacity: 1;
  }

添加了JSfiddle