jquery - 在没有 "pushing"其他元素的情况下切换图像可见性的最佳方法是什么？

Question

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

我遇到的问题是它在显示图像时将其他文本“推”到左侧(因为默认状态是显示:无”)。我正在寻找一个解决方案

在表格单元格中，我使用以下代码在右上角有一张图片:

 <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