Question

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

我已经成功完成了以下示例中的工作，但正如您所看到的，当我显示剪辑rect的一部分或其他部分时，显示的区域会移动顶部属性。

改变顶部是昂贵的渲染方式。我可以以某种方式绕过它吗？

小提琴： https://jsfiddle.net/coolcatDev/nn1d9xe7/1/

HTML：

<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>

的CSS：

    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;
}

css clip替代显示？

0 个答案: