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

Posted 2023-02-21

【中文标题】在不“推”其他元素的情况下切换图像可见性的最佳方法是啥？

【英文标题】：What is the best way to toggle the visibilty of an image without "pushing" other elements over?在不“推”其他元素的情况下切换图像可见性的最佳方法是什么？

【发布时间】：2014-12-05 17:24:23

【问题描述】：

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

我遇到的问题是，当显示图像时，它会将其他文本“推”到左侧（因为默认状态是 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();
);

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

【问题讨论】：

使用visibility:hidden，还是会占空间但不显示

看这个问题：***.com/questions/9614622/…

【参考方案1】：

不用 jQuery 也可以：

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

.cellMenu:hover img
  
     opacity: 1;
  

添加了JSfiddle

【讨论】：

我不想在将鼠标悬停在图像上时显示图像，而是在将鼠标悬停在 tablecell 上时显示图像。 .

看看我的编辑。当您将鼠标悬停在.cellMenu 上时，它会更改其中存储的img 的不透明度。

查看 JSfiddle 看看它是否有你想要的结果 :)

所有浏览器都支持这个css吗？