Question

我需要修复此表，以便将悬停点上方的线隐藏在该列中。让我们说底部的中间盒子在盘旋，你会在它上面看到3条线。我需要那些线条不显示。

  <table>
      <tr><td></td><td></td><td></td></tr>
      <tr><td></td><td></td><td></td></tr>
      <tr><td></td><td></td><td></td></tr>
      <tr><td></td><td></td><td></td></tr>
      <tr><td></td><td></td><td></td></tr>
  </table>


    <script>
      $('td').on('mouseover mouseout', function(){
             $(this).prevAll().addBack()
             .add($(this).parent().prevAll()
             .children(':nth-child(' + ($(this).index() + 1) +   
       ')')).toggleClass('hover');
         });

  </script>

table {
    table-layout:fixed;
    width:100%;
    height:300px;
    border-collapse:collapse;
      }
 td {
    border:1px solid black;
 }
.hover {
    border-color:#ef7c32; border-width:2px;}

Answer 1

这会在一列单元格上切换悬停类：

  $('td').on('mouseover mouseout', function(){
     var ix = $(this).parent().children().index(this);
     $('table tr').children().eq(ix).toggleClass('hover');
  });

第一个语句查找行中悬停单元格的索引。第二个在所有行的索引处切换单元格上的类。

然后相应的风格：

.hover {
    border-top: none;
    border-bottom: none:
}
table tr:first-child .hover {
    border-top: 1px solid black;
}
table tr:last-child .hover {
    border-bottom: 1px solid black;
}

表格悬停边框颜色删除列线

1 个答案: