代码之家 › 专栏 › 技术社区 › Saeesh Tendulkar

位置绝对TD使可见后留下空白

css html jquery

Saeesh Tendulkar · 技术社区 · 6 年前

所以,我有一个表,每个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上运行良好(未显示空格)。

如何修复铬合金?

0 回复 | 直到 6 年前

Omi 6 年前

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