Question

我正在使用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();        
    }
});

首先，我通过给他们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/

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

我正在使用委托事件（出于习惯，因此他们可以共享一个共同的选择器），但是两个单独的＆＃34;正常＆＃34; （静态）选择器也可能正常工作。例如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/

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

2 个答案: