如何突出显示多行时悬停在一行

Question

在我的表中，我有一个跨越多行的列中的一些值。当我将鼠标悬停在此值上时，只有一行是高亮的（包含实际值的行）。我的问题是，在徘徊在跨越它们的价值上时，是否还有其他行可能会高亮？

这里是一个代码示例：

table { 
 
     border-collapse: collapse; 
 
     width: 100%; 
 
    } 
 
    
 
    th, td { 
 
     padding: 8px; 
 
     text-align: left; 
 
     border-bottom: 1px solid #ddd; 
 
    } 
 
    
 
    tr:hover{background-color:#f5f5f5}

<h2>Hoverable Table</h2> 
 
    <p>Move the mouse over the table rows to see the effect.</p> 
 
    
 
    <table> 
 
     <tr> 
 
     <th>First Name</th> 
 
     <th>Last Name</th> 
 
     <th>Points</th> 
 
     </tr> 
 
     <tr> 
 
     <td>Peter</td> 
 
     <td>Griffin</td> 
 
     <td rowspan="2">$100</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Lois</td> 
 
     <td>Griffin</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Joe</td> 
 
     <td>Swanson</td> 
 
     <td rowspan="2">$300</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Cleveland</td> 
 
     <td>Brown</td> 
 
     </tr> 
 
    </table> 
 

Answer 1

如果你的问题是关于徘徊$ 100的时候，无论是彼得和Lois行应该得到强调，你不能用CSS独自做到这一点按我的理解。你想去js脚本。

查看下面的代码片段以供参考。悬停在td rowspan。希望这可以帮助。

$('.hasRowSpan').hover(function(){ 
 
\t $(this).closest('tr').toggleClass('bg-red'); 
 
    $(this).closest('tr').next('tr').toggleClass('bg-red'); 
 
});

table { 
 
    border-collapse: collapse; 
 
    width: 100%; 
 
} 
 

 
th, 
 
td { 
 
    padding: 8px; 
 
    text-align: left; 
 
    border-bottom: 1px solid #ddd; 
 
} 
 

 
tr:hover{background-color:red} 
 

 
.bg-red{ 
 
    background-color:red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 
    <tr> 
 
    <th>First Name</th> 
 
    <th>Last Name</th> 
 
    <th>Points</th> 
 
    </tr> 
 
    <tr> 
 
    <td>Peter</td> 
 
    <td>Griffin</td> 
 
    <td class="hasRowSpan" rowspan="2">$100</td> 
 
    </tr> 
 
    <tr> 
 
    <td>Lois</td> 
 
    <td>Griffin</td> 
 
    </tr> 
 
    <tr> 
 
    <td>Joe</td> 
 
    <td>Swanson</td> 
 
    <td class="hasRowSpan" rowspan="2">$300</td> 
 
    </tr> 
 
    <tr> 
 
    <td>Cleveland</td> 
 
    <td>Brown</td> 
 
    </tr> 
 
</table>

更新：您可以使用nextAll()当rowspan有2点以上的行。

根据您的评论查找以下更新的代码段。

$('tr').hover(function() { 
 
    if ($(this).find('td').hasClass('hasRowSpan')) { 
 
    $(this).next('tr').toggleClass('bg-red'); 
 
    } 
 
    if ($(this).prev('tr').find('td').hasClass('hasRowSpan')) { 
 
    $(this).prev('tr').toggleClass('bg-red'); 
 
    } 
 
});

table { 
 
    border-collapse: collapse; 
 
    width: 100%; 
 
} 
 

 
th, 
 
td { 
 
    padding: 8px; 
 
    text-align: left; 
 
    border-bottom: 1px solid #ddd; 
 
} 
 

 
tr:hover { 
 
    background-color: red 
 
} 
 

 
.bg-red { 
 
    background-color: red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 
    <tr> 
 
    <th>First Name</th> 
 
    <th>Last Name</th> 
 
    <th>Points</th> 
 
    </tr> 
 
    <tr> 
 
    <td>Peter</td> 
 
    <td>Griffin</td> 
 
    <td class="hasRowSpan" rowspan="2">$100</td> 
 
    </tr> 
 
    <tr> 
 
    <td>Lois</td> 
 
    <td>Griffin</td> 
 
    </tr> 
 
    <tr> 
 
    <td>David</td> 
 
    <td>Rijo</td> 
 
    <td>$500</td> 
 
    </tr> 
 
    <tr> 
 
    <td>Joe</td> 
 
    <td>Swanson</td> 
 
    <td class="hasRowSpan" rowspan="2">$300</td> 
 
    </tr> 
 
    <tr> 
 
    <td>Cleveland</td> 
 
    <td>Brown</td> 
 
    </tr> 
 
</table>

更新1：我刚刚更新的脚本，按您的评论在这里。 注意：相信这不会工作，如果你有行跨度超过2

$('.hasRowSpan').hover(function() { 
 
    $(this).closest('tr').toggleClass('bg-red'); 
 
    $(this).closest('tr').next('tr').toggleClass('bg-red'); 
 
}); 
 

 
$('tr').hover(function() { 
 
    if ($(this).prev('tr').find('td').hasClass('hasRowSpan')) { 
 
    $(this).prev('tr').find('td.hasRowSpan').toggleClass('bg-red'); 
 
    } 
 
});

table { 
 
    border-collapse: collapse; 
 
    width: 100%; 
 
} 
 

 
th, 
 
td { 
 
    padding: 8px; 
 
    text-align: left; 
 
    border-bottom: 1px solid #ddd; 
 
} 
 

 
tr:hover { 
 
    background-color: red 
 
} 
 

 
.bg-red { 
 
    background-color: red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 
    <tr> 
 
    <th>First Name</th> 
 
    <th>Last Name</th> 
 
    <th>Points</th> 
 
    </tr> 
 
    <tr> 
 
    <td>Peter</td> 
 
    <td>Griffin</td> 
 
    <td class="hasRowSpan" rowspan="2">$100</td> 
 
    </tr> 
 
    <tr> 
 
    <td>Lois</td> 
 
    <td>Griffin</td> 
 
    </tr> 
 
    <tr> 
 
    <td>David</td> 
 
    <td>Rijo</td> 
 
    <td>$500</td> 
 
    </tr> 
 
    <tr> 
 
    <td>Joe</td> 
 
    <td>Swanson</td> 
 
    <td class="hasRowSpan" rowspan="2">$300</td> 
 
    </tr> 
 
    <tr> 
 
    <td>Cleveland</td> 
 
    <td>Brown</td> 
 
    </tr> 
 
</table>

更新2：检查上面的代码中，我已经改变了我的代码，按您的期望的输出。