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

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

1 个答案: