使用Javascript，如何显示 <tr> 在另一个之上 <tr> 悬停时，隐藏第二个 <tr> ？

Question

JSFiddle： http : //jsfiddle.net/9u8tnh97/

我正在使用jQuery和Bootstrap。 我有一个包含4个<tr>元素的表，如下所示：

<table class="table table-bordered">
  <thead>
    <tr>
      <th>First Name</th>
      <th>Last Name</th>
    </tr>
  </thead>

  <tbody>
    <tr class="hover-data">
      <td>Mark</td>
      <td>Otto</td>
    </tr>

      <tr class="hover-link hide">
          <td colspan="2"><a href="#">Some link1</a></td>
      </tr>

    <tr class="hover-data">
      <td>Larry</td>
      <td>the Bird</td>
    </tr>

      <tr class="hover-link hide">
          <td colspan="2"><a href="#">Some link2</a></td>
      </tr>
  </tbody>
</table>

这是我的Javascript：

$('table tbody tr').hover(function() {
    if($(this).hasClass('hover-data')){
        $(this).next().show();
        $(this).hide();
    } else {
        $(this).prev().show();
        $(this).hide();        
    }
});

首先，我通过给它们hide类来隐藏两行带有table-hover的类，而只显示那些带有table-data类的两行。

我想要实现的目标：当我用类table-data悬停tr时，我想显示下 table-hover的下一个立即数 tr并隐藏“悬停的tr”。

当我再次将鼠标移到外面时，我希望恢复所有内容，并且只看到类hover-data的tr 。

不知道为什么我的代码行不通。 有任何想法吗？

Answer 1

这其中使用mouseenter原始行和mouseleave对新行。

$('table tbody').on('mouseenter', 'tr.hover-data', function () {
    $(this).next().show();
    $(this).hide();
}).on('mouseleave', 'tr.hover-link', function () {
    $(this).prev().show();).hide();
});

JSFiddle： http : //jsfiddle.net/TrueBlueAussie/9u8tnh97/15/

我注意到引导hide类有点“强”，并且覆盖了show()所以我现在也将其更改为style="display: none" 。 而是在下面的示例中使用您自己的类，例如hideme ： http : //jsfiddle.net/TrueBlueAussie/9u8tnh97/17/

我正在使用委托事件（出于习惯，因此它们可以共享一个公共选择器），但是两个单独的“正常”（ 静态 ）选择器也可能会正常工作。 例如http://jsfiddle.net/TrueBlueAussie/9u8tnh97/16/

Answer 2

像这样：

$('table tbody tr').hover(function() {
    if($(this).hasClass('hover-data')){
        $(this).next().toggleClass('hidden');
    }
});

https://jsfiddle.net/gqyrpnes/