如何突出顯示多行時懸停在一行

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：檢查上面的代碼中，我已經改變了我的代碼，按您的期望的輸出。