HTML 表格鼠标悬停到最后一个 Marge 列答案

【问题标题】：HTML Table Mouse Hover to last Marge ColumnHTML 表格鼠标悬停到最后一个 Marge 列
【发布时间】：2022-11-16 14:36:59
【问题描述】：

enter image description here我有一个带有鼠标悬停效果的表格，其中合并了最后一列。下面是我的代码：

<!DOCTYPE html>
<html>
<head>
    <style>
        table,
        th,
        td {
            border: 1px solid black;
            border-collapse: collapse;
            padding: 6px;
        }
    </style>
    <style style="text/css">
    .hoverTable{
        width:100%; 
        border-collapse:collapse; 
    }
    .hoverTable td{ 
        padding:7px; border:#4e95f4 1px solid;
    }
.hoverTable tr:nth-child(-n+50):hover td:nth-child(-n+2)
    {
          background-color: #ffff99;
    }
</style>

<body style="text-align:center">

    <h1 style="color:green;">
        Mouse Hover
    </h1>
    
    <h2>Requirement is When I hover to Canada, Color only Canada not Gloria Jean's Coffees and Coffee</h2>

    <table align="center"  class="hoverTable">
        <tr>
            <th>Name</th>
            <th>Item</th>
            <th>Location</th>
        </tr>
        <tr>
            <td>Gloria Jean's Coffees</td>
            <td>Coffee</td>

            <td rowspan="3" class="highlight" data-cell="c5">Canada</td>
        </tr>
        <tr>
            <td >North End Coffee Roasters</td>
            <td>Bagel</td>
        </tr>
        <tr>
            <td >Secret recipe</td>
            <td>Cheess Cake</td>
        </tr>
    </table>
</body>
</html>

当我悬停特定行时，悬停效果正常。但是当我将鼠标悬停到最后一个合并列时，悬停效果也适用于第一行。我希望，当我将鼠标悬停在最后一个合并列时，悬停效果仅适用于该特定合并列，而不适用于第一行。

【问题讨论】：

标签： html css html-table mousehover

【解决方案1】：

像这样尝试，

 table,
th,
td {
    border: 1px solid black;
    border-collapse: collapse;
    padding: 6px;
}

.hoverTable{
    width:100%; 
    border-collapse:collapse; 
}
.hoverTable td{
    padding:7px; border:#4e95f4 1px solid;
}
.hoverTable tr:hover td:not(:last-child):not(.nothighlight)
{
     background-color: #ffff99;
}
.highlight:hover
{ 
    background-color: aqua;
}

    <body style="text-align:center">



   <table align="center"  class="hoverTable">
    <tr>
        <th>Name</th>
        <th>Item</th>
        <th>Location</th>
    </tr>
    <tr>
        <td class="nothighlight">Gloria Jean's Coffees</td>
        <td class="nothighlight">Coffee</td>

        <td rowspan="3" class="highlight" >Canada</td>
    </tr>
    <tr>
        <td >North End Coffee Roasters</td>
        <td>Bagel</td>
        <td style="display: none;"></td>
    </tr>
    <tr>
        <td >Secret recipe</td>
        <td>Cheess Cake</td>
        <td style="display: none;"></td>
    </tr>
</table>
</body>

【讨论】：

感谢 MAYUR SANCHETI 的回复，但是当我将鼠标悬停在最后一个合并列时，悬停效果仅适用于该特定合并列，而不适用于第一行。
现在检查我更改代码
好的，但我的实际要求是，当我将鼠标悬停在 Gloria Jean's Coffees 或 Coffee 上时，悬停效果将在两行中起作用，但在加拿大合并列中不起作用，对于下面的 2 行也一样。除此之外，当我将鼠标悬停在加拿大时，悬停效果将仅适用于 Canada Marge 列而不适用于其他行或列。请你再给支票。再次感谢您的回复。
现在检查我做了一些改变