javascript - 显示/隐藏在悬停列上的行是否具有通用(动态)代码的行？

在网页上，我在一行（.toplvl）中有五列。每个都有自己的类，例如.tli-1, .tli-2, .tli-3, .tli-4, .tli-5

因此，第三列的类为.tli-3

在.toplvl行下方，我还有5行称为.tlcr-1, .tlcr-2, .tlcr-3, .tlcr-4, .tlcr-5

因此，第三行的类为.tlcr-3

我想实现什么

将鼠标悬停在.tli-1上时，只要鼠标指针位于.tlcr-1或.tli-1上，它应显示.tlcr-1并保持打开状态

其他所有列也采用相同的逻辑。

它必须是动态的

列和行的数量可以不同。一次可以是3，但也可以是50。除了数字部分，类将保持不变。如果它们位于例如50，则最后一列将被称为.tli-50，最后一行将被称为tlcr-50

我当前的代码

可以，但是需要我重复50次以上并手动更改数字。为此必须有更好的方法。

$( ".tli-2" ).mouseenter(function() {
  $( ".tlcr-2" ).css('display', 'block');
})
$( ".tli-2" ).mouseleave(function() {
  $( ".tlcr-2" ).mouseenter(function() {
      $( ".tlcr-2" ).css('display', 'block');
      $( ".tlcr-2" ).mouseleave(function() {
        $( ".tlcr-2" ).css('display', 'none');
      })
  })
  $( ".tlcr-2" ).css('display', 'none');
});

小提琴，以更好地了解结构

https://jsfiddle.net/3naxLfm6/

感谢您的帮助

每个要回复的人。非常感谢您抽出宝贵的时间。我非常感谢能解决问题的解决方案，但是偏离路线是绝对欢迎的任何建议。此外，如果对这个问题尚不清楚，请允许我在不赞成投票之前加以改善。

最佳答案

如果我对您的理解正确，那么您可以做一些事情。


听一次mouseenter和mouseleave
在鼠标输入时，首先，hide()所有行。然后，获取悬停的项目的index和show()对应的（按eq()）行。

$('.column').on('mouseenter', function() {
  $('.tlcr').hide();
  const index = $(this).index('.column');
  $('.tlcr').eq(index).show();
});

.row {
  display:flex;
  flex-flow:row nowrap;
  justify-content:space-between;
  width:100%;
  min-height:50px;
}
.tlcr {
  display: none;
}
.column {
  text-align:center;
}
.w20 {
  width:20%;
}
.tli-1, .tlcr-1 {background:red;}
.tli-2, .tlcr-2 {background:blue;}
.tli-3, .tlcr-3 {background:green;}
.tli-4, .tlcr-4 {background:purple;}
.tli-5, .tlcr-5 {background:orange;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row toplvl">
  <div class="column w20 tli-1">Item 1</div>
  <div class="column w20 tli-2">Item 2</div>
  <div class="column w20 tli-3">Item 3</div>
  <div class="column w20 tli-4">Item 4</div>
  <div class="column w20 tli-5">Item 5</div>
</div>
<div class="row tlcr tlcr-1">Content 1</div>
<div class="row tlcr tlcr-2">Content 2</div>
<div class="row tlcr tlcr-3">Content 3</div>
<div class="row tlcr tlcr-4">Content 4</div>
<div class="row tlcr tlcr-5">Content 5</div>