Javascript css剪辑替代显示？

其思想是一个表单元格中有“n”个div。我一直在使用display css属性在moseover（悬停）上显示一个或另一个单元格内容，但如果使用“clip rect（）”css属性显示单元格内的一个或另一个内容，则渲染过程可以得到改进

在下面的示例中，我成功地实现了这一点，但正如您所看到的，当我显示clip rect的一部分或另一部分时，显示的区域相对于top属性移动

从渲染角度看，更改顶部是昂贵的。我能绕过去吗

小提琴：

html:

---

我不知道这个问题的答案，但我很好奇你为什么要优化这么多？对我来说，这似乎是一个便宜的操作，而不是现代webdev中需要担心的事情？@KristianBarrett我不想在一个大表上添加/删除DOM节点（就像编辑一些css属性那样），因为重新绘制需要时间（平均单元格n°=3000）。我不希望任何形式的交互以60帧/秒的速度呈现（手机/平板电脑也是如此），也不希望出现Jank。检查csstriggers.com至c css属性从默认更改或更新的成本EU可以比较时间轴上性能方面的差异（显示、不透明度、剪辑…）（chrome 4example）

<table>
  <tr class="tableRows">
    <td class="tableCells">
     <div class="clipper">
      <div class="vals">
        <p>Cell val. 1</p>
        <p>Cell val. 2</p>
        <p>Cell val. 3</p>
      </div> 
      <div class="editBtn">
        <p>Edit</p>
      </div>  
     </div>  
    </td>

    <td class="tableCells">
     <div class="clipper">
      <div class="vals">
        <p>Cell val. 1</p>
        <p>Cell val. 2</p>
        <p>Cell val. 3</p>
      </div> 
      <div class="editBtn">
        <p>Edit</p>
      </div>  
     </div>  
    </td>

  </tr>
  <tr class="tableRows">
    <td class="tableCells">
     <div class="clipper">
      <div class="vals">
        <p>Cell val. 1</p>
        <p>Cell val. 2</p>
        <p>Cell val. 3</p>
      </div> 
      <div class="editBtn">
        <p>Edit</p>
      </div>  
     </div>  
    </td>

    <td class="tableCells">
     <div>
      <div class="vals">
        <p>Cell val. 1</p>
        <p>Cell val. 2</p>
        <p>Cell val. 3</p>
      </div> 
      <div class="editBtn">
        <p>Edit</p>
      </div>  
     </div>  
    </td>

  </tr>

</table>

    table{
    outline:2px solid black;
}
.tableCells{
    position:relative;
    background:lightBlue;
    outline:2px solid black;
    width:100px;
    height:30px;

}

.vals{
background:lightGreen;
}

.editBtn{
background: yellow;
}


.clipper{
outline:1px solid red;
position:absolute;
overflow:hidden;
top:0px;
width:100%;


clip:rect(0px,100px,15px,0px );



}

.clipper:hover{
outline:1px solid red;
position:absolute;
overflow:hidden;
top:-56px;
width:100%;


clip:rect(56px,100px,70px,0px );



}


p{
  margin:0;
}