HTML合并列表格鼠标悬停优化：仅高亮合并列本身

问题分析 #

当前代码中，带rowspan="3"的「Canada」单元格属于第一行的<tr>，当鼠标悬停在这个合并单元格上时，会触发其父<tr>的hover事件，导致第一行的前两列也被高亮。我们需要修改CSS逻辑，实现：

• 悬停普通行的前两列时，正常高亮这两列
• 悬停合并的「Canada」单元格时，仅高亮该单元格本身

修改后的完整代码 #

<!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;
    }
    /* 仅当悬停前两列的td时，高亮当前tr的前两列 */
    .hoverTable tr:nth-child(-n+50) td:nth-child(-n+2):hover ~ td:nth-child(-n+2),
    .hoverTable tr:nth-child(-n+50) td:nth-child(-n+2):hover {
          background-color: #ffff99;
    }
    /* 单独给合并单元格加悬停高亮 */
    .hoverTable td.highlight:hover {
          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>

关键修改说明 #

1. 替换原tr hover规则：
   原来的规则是<tr>hover就高亮前两列，现在改成只有当鼠标悬停在前两列的<td>上时，才高亮当前行的前两列。这样当鼠标在合并单元格上时，不会触发这个规则。

2. 单独为合并单元格添加hover样式：
   给带highlight类的合并单元格单独设置hover高亮，确保悬停时只有它自己变色。

另一种更简洁的实现方式 #

如果不需要兼容旧浏览器，也可以用:has()伪类来实现，逻辑更直观：

/* 当tr没有被highlight单元格hover时，tr hover才高亮前两列 */
.hoverTable tr:nth-child(-n+50):not(:has(.highlight:hover)):hover td:nth-child(-n+2) {
    background-color: #ffff99;
}
.hoverTable td.highlight:hover {
    background-color: #ffff99;
}

这个写法直接排除了「合并单元格被hover」时的tr高亮逻辑，代码更简洁。

内容的提问来源于stack exchange，提问作者arifS