Question

因此，我有一个表，每个TR中的最后一个TD元素具有“ abs”类。此类具有代码中给出的样式。

默认情况下它是隐藏的，并且在TR悬停时，我通过在jQuery中为其赋予“ display：block”样式来显示它。

$("tr").hover(function() {
  $(this).find(".abs").show();
},
function() {
  $(this).find(".abs").hide();
});

.abs {
  display: none;
  position: absolute;
  margin-left: 100px;
  background: #fff;
  margin-top: -40px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<br /><br /><br /><br />
<table>
  <tr>
    <td>123</td>
    <td class="abs">456</td>
  </tr>
</table>

我遇到的问题是，当TD.abs显示（悬停时）时，它显示得很好，但是TR的末尾出现了一个我不想要的空白区域。仅在Chrome中会发生这种情况，而在Firefox上则可以正常工作（没有显示空白空间）。

如何为Chrome修复它？

Answer 1

删除position: absolute;，您的代码即可使用。

$("tr").hover(function() {
    $(this).find(".abs").show();
  },
  function() {
    $(this).find(".abs").hide();
  });

.abs {
  display: none;
  background: #fff;
  margin-top: -40px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <td>123</td>
    <td class='abs'>456</td>
  </tr>
</table>

位置绝对TD在可见后留出空白空间

1 个答案: