CSS表格行列悬停高亮异常：背景层级与交互冲突问题

问题场景 #

基于纯CSS实现表格行列悬停高亮，部分<td>通过bgcolor属性设置了背景色，出现以下冲突：

• 高亮层z-index: -1时，带背景色的<td>层级更高，高亮被遮挡；
• 高亮层设为正数后，高亮能显示在背景色上方，但鼠标在已高亮单元格内移动时，无法切换到其他单元格的高亮。

原代码 #

HTML #

<table>
    <tr>
        <th></th>
        <th class="col">50kg</th>
        <th class="col">55kg</th>
        <th class="col">60kg</th>
        <th class="col">65kg</th>
        <th class="col">70kg</th>
    </tr>

    <tr>
        <th class="row">160cm</th>
        <td>20</td>
        <td>21</td>
        <td>23</td>
        <td bgcolor="yellow">25</td>
        <td bgcolor="yellow">27</td>
    </tr>

    <tr>
        <th class="row">165cm</th>
        <td>18</td>
        <td>20</td>
        <td bgcolor="yellow">22</td>
        <td>24</td>
        <td>26</td>
    </tr>

    <tr>
        <th class="row">170cm</th>
        <td bgcolor="yellow">17</td>
        <td>19</td>
        <td>21</td>
        <td>23</td>
        <td>25</td>
    </tr>

    <tr>
        <th class="row">175cm</th>
        <td>16</td>
        <td>18</td>
        <td>20</td>
        <td>22</td>
        <td>24</td>
    </tr>

</table>

原CSS #

table {
    overflow: hidden;
    z-index: -5;
}
table th { 
    color:white;
    background-color:#404040;
    padding: 8px;
    width: 50px;
}
table td { 
    color: #1a3640;
    border-radius: 3px;
}
table td,table th,table .row,table .col { 
    cursor: pointer;
    position: relative;
}
table td:hover::before,table .row:hover::before { 
    background-color: rgba(255, 165, 0, 0.5);
    content: '\00a0';  
    height: 100%;
    left: -300vh;
    position: absolute;  
    top: 0;
    width: 300vw;   
    z-index: -1;        
}
table td:hover::after,table .col:hover::after { 
    background-color: rgba(255, 165, 0, 0.5);
    content: '\00a0';  
    height: 300vw;    
    left: 0;
    position: absolute;  
    top: -300vh;
    width: 100%;
    z-index: -1;        
}

解决方案 #

调整CSS的层级关系，既保证高亮能覆盖自定义背景色，又不影响鼠标事件的触发：

修改后的CSS #

table {
    overflow: hidden;
}
table th { 
    color:white;
    background-color:#404040;
    padding: 8px;
    width: 50px;
}
table td { 
    color: #1a3640;
    border-radius: 3px;
    position: relative;
    z-index: 0; /* 给td设置基础层级，低于高亮伪元素 */
}
table th, table .row, table .col { 
    cursor: pointer;
    position: relative;
}
table td:hover::before, table .row:hover::before { 
    background-color: rgba(255, 165, 0, 0.5);
    content: '\00a0';  
    height: 100%;
    left: -300vh;
    position: absolute;  
    top: 0;
    width: 300vw;   
    z-index: 1; /* 高亮层高于带bgcolor的td */
}
table td:hover::after, table .col:hover::after { 
    background-color: rgba(255, 165, 0, 0.5);
    content: '\00a0';  
    height: 300vw;    
    left: 0;
    position: absolute;  
    top: -300vh;
    width: 100%;
    z-index: 1; /* 高亮层高于带bgcolor的td */
}

原理说明 #

1. 层级控制：给所有<td>设置z-index: 0，明确其基础层级；将高亮伪元素的z-index设为1，确保高亮能覆盖带bgcolor的单元格。
2. 事件触发：<td>本身保持position: relative，高亮伪元素作为<td>的子元素，鼠标事件会冒泡到<td>上，因此移动鼠标时能正常触发其他单元格的hover状态，不会出现无法切换高亮的问题。

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