jquery - 显示/隐藏表内上一个 <tr> 下方的重叠内容 <tr>

Question

我想用 jquery 实现一个显示/隐藏 onMouseOver() 函数，它让我出现在第一个下面第二个而不改变表中 <tr> 的数量(我的意思是动态 <tr> 它必须重叠在现有的下方)。关于这件事我已经找到了。我试图用 css 实现相同的解决方案......但我遇到了“闪烁表”问题。 解决它的最佳解决方案是什么？

html代码

<table>
    <tr>
        <td>...</td>
        <td class="hover-cell" data-target="#hidden_123">Hover this...</td>
        <td class="hidden" id="hidden_123">Hidden...</td>
    </tr>
    <tr>
        <td>...</td>
        <td class="hover-cell" data-target="#hidden_456">Hover this...</td>
        <td class="hidden" id="hidden_456">Hidden...</td>
    </tr>
    <tr>
        <td>...</td>
        <td class="hover-cell" data-target="#hidden_789">Hover this...</td>
        <td class="hidden" id="hidden_789">Hidden...</td>
    </tr>
</table>

查询

$('table').on('mouseover', '.hover-cell', function() {
    var target = $(this).data('target');
    $(target).show();
}).on('mouseout', '.hover-cell', function() {
    var target = $(this).data('target');
    $(target).hide();
});

CSS代码

.hidden { display: none; }

jsfiddle--> http://jsfiddle.net/jan7ajpy/

图片。

Answer 1

如果我阅读了您的问题并且正确理解了您要寻求的内容，那么这可能会有所帮助。我使用 jQuery 来隐藏该行并在悬停时在其位置显示另一个元素。请将光标悬停在第一个给定元素上以查看示例:

$(document).ready(function() {
  $(".example").hide();
  $("tr:first-of-type td:first-of-type").hover(function() {
    $(".example").show();
    $("tr:nth-of-type(3) td").hide();
    $("tr:nth-of-type(4) td").css('padding-top', '20px');
  }, function() {
    $(".example").hide();
    $("tr:nth-of-type(3) td").show();
    $("tr:nth-of-type(4) td").css('padding-top', '0');
  });
});

.example {
  position: absolute;
  top: 30px;
  left: 8px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <td>foo</td>
  </tr>
  <tr class="example">
    <td>bar</td>
  </tr>
  <tr>
    <td>something</td>
    <tr>
      <td>some other data</td>
    </tr>
    <tr>
      <td>
        foobar
      </td>
    </tr>
</table>

如果这是您正在寻找的东西但不完全是您的意思，请告诉我。

JSFiddle