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

Question

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

我正在使用 jQuery 和 Bootstrap。我有一张 table 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();        
    }
});

首先，我隐藏了类 table-hover 的两行通过给他们一个hide类，我只展示类 table-data 的那些.

我想要实现的目标:当我将鼠标悬停在 tr 上时与类 table-data ，我想要下一个和立即 tr与类 table-hover显示和隐藏的“悬停 tr”。

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

不确定为什么我的代码不起作用。有什么想法吗？

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/

我注意到 Bootstrap hide 类有点太“强”并覆盖了 show() 所以我也将它们更改为 style="display:暂时没有”。而是使用您自己的类(class)，例如hideme 在以下示例中:http://jsfiddle.net/TrueBlueAussie/9u8tnh97/17/

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