表悬停边框颜色删除列线

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; 
}