Question

我在考虑是否可以使用css悬停在表上移动鼠标光标时调整高度表的大小的解决方案，因为当我尝试在下一行上移动光标时...表闪烁...结束我想在开始悬停时调整高度表的大小也可以解决闪烁的问题...总的来说，我在问我自己是否可以在tr:hover + #test {...}中添加另一个类来动态地更改表的高度而无需使用scss或更少。

这里是我的示例链接-> https://jsfiddle.net/7z4b8s63/2/

css

table,tr,  td { 
border: 1px solid black;
}
#classTest{
    display: none;
    transition: all .2s ease-in-out;
    }
tr:hover + #classTest{
    display:table-row;
    /* z-index: 1;  */
    transform: scale(1); 

    width: 100%
}

html

  <table style="width:100%; table-layout: fixed"  >
                                <tbody>
                                <tr>
                                    <td>TEST</td>
                                    <td>TEST </td>
                                    <td>TEST</td>
                                    <td> TEST</td>
                                </tr>
                                <tr id="test" class="classTest">
                                    <td >A</td>
                                    <td>B</td>
                                    <td>C</td>
                                    <td>D</td>
              <tr>
                                    <td>E</td>
                                    <td>F </td>
                                    <td>G</td>
                                    <td>H </td>
                                </tr>
                                <tr id="test1" class="classTest1">
                                    <td >I</td>
                                    <td>L</td>
                                    <td>M</td>
                                    <td>N</td>
              </tr>
                   <tr>
                                    <td>TEST</td>
                                    <td>TEST </td>
                                    <td>TEST</td>
                                    <td>TEST </td>
                                </tr>
                                <tr id="test2" class="classTest2">
                                    <td >O</td>
                                    <td>P</td>
                                    <td>Q</td>
                                    <td>R</td>
              </tr>
</tbody>
</table>

*编辑以改善问题

Answer 1

这什么也没做。这保持相同的大小。转换：scale（1）

请尝试以下操作：

td:hover {
   transform: scale(1.1); 
}

这会将td元素的大小调整为10％

将光标移到上方时，可以动态调整高度表的大小

1 个答案: