清哥的小屋

本文同步自 CSDN · 清阿哥，原文发布于 2020-11-16。

现在有一个需求鼠标进入表格的当前行，显示操作列的删除图标，鼠标移出隐藏，发现一种超级简单的实现方法，只用ss就能实现。
直接上代码
在需要隐藏显示的元素上加上 delImg 就可以了 就这么简单粗暴

1
.delImg {
2
  cursor: pointer;
3
  opacity: 0;
4
}
5

6
.el-table__body tr:hover {
7
  .delImg {
8
    opacity: 1;
9
  }
10
}

ps：说下为什么要用 opacity 属性进行显示隐藏，如果用display 属性进行操作的话，因为它不占据原来的位置，显示隐藏的操作列的宽度会变，体验不好，所以就用了透明属性元素占据原来的位置。