Question

我正在尝试实现一个简单的表，在行中包含一些内容。由于我想显示两种类型的内容，因此在id="testClass" #testClassD+hover{...}上进行相对定位。

一切都很好，但我注意到表中的“闪烁”会产生相变（向下移动光标）。我试图考虑可能是什么，但是我没有找到一个好的解决方案。在此先感谢您的一些建议。 ps：这是与我的问题有关的动画gif：https://imgurs.com/a/v0cQ2DyD

.textCenterRow {
    text-align: center;
}

#test5 {
    display: none;
    /* position: absolute; */
    /* float: left; */
    /* margin-left: -156px; */
    background-color: black;
    color: #fff;
}

tr:hover + #test5 {
    display:table-row;
    /* width: 200px */
}

tr:hover::after + #test5 {
    display:table-row;
}

<table style="width:100%; table-layout: fixed;" class="table  table-striped table-bordered table-hover white-background" >
  <tbody>               
   <tr id="test4">
      <td>B</td>
      <td class="textCenterRow"></td>
      <td class="textCenterRow"></td> 
      <td class="textCenterRow"></td>
    </tr>
    <tr id="test5">
      <td>C</td>
      <td class="textCenterRow"></td>
      <td class="textCenterRow"></td> 
      <td class="textCenterRow"></td>
    </tr>
  </tbody>
</table>

在以下位置添加具有相关id = class的悬停时表闪烁

0 个答案: