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

Using Javascript, how can I show a <tr> on top of another <tr> on hover, hiding the second <tr>?

本文关键字：gt tr lt 悬停 第二个 隐藏 Javascript 显示 何显示 使用      更新时间：2023-09-26

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"。

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

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

这一个对原始行使用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/

像这样：

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

https://jsfiddle.net/gqyrpnes/

相关文章：