如何实现HTML表格鼠标悬停单元格时整行背景变为黄色？

当前表格鼠标悬停单个单元格时仅该单元格背景变黄，需要实现鼠标悬停任意单元格时，所在整行背景变为黄色（比如悬停Amazon单元格时，该行所有单元格背景都变黄）。

现有代码 #

HTML代码

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width"  />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link href="style.css" rel="stylesheet"/>
    <title>Index2</title>
</head>
<body>
    <center>
    <div>
    <table>
        <tr>
        <th>Sites</th>
        <th>Views</th>
        <th>Clicks</th>
        <th>Avrage</th>
        </tr>
            <tr>
            <td class="Google">Google</td>
            <td class="Value">9518</td>
            <td class="Value">6369</td>
            <td class="Value">1:32:50</td>
            </tr>
            <tr>
                <td class="Twitter">Twitter</td>
                <td class="Value">7326</td>
                <td class="Value">10437</td>
                <td class="Value">00:51:22</td>
            </tr>
            <tr>
                <td class="Amazon">Amazon</td>
                <td class="Value">4162</td>
                <td class="Value">5327</td>
                <td class="Value">00:24:34</td>
            </tr>
            
            <tr>
                    <td class="Linkedin">Linkedin</td>
                    <td class="Value">3654</td>
                    <td class="Value">2961</td>
                    <td class="Value">00:12:10</td>
            </tr>
            <tr>
                <td class="TopLearn">TopLearn</td>
                <td class="Value">2002</td>
                <td class="Value">4135</td>
                <td class="Value">00:46:19</td>
                </tr>
                <tr>
                    <td class="GitHub">GitHub</td>
                    <td class="Value">4623</td>
                    <td class="Value">3486</td>
                    <td class="Value">00:31:52</td>
                    </tr>
    </table>
</div>
</center>
</body>
</html>

CSS代码

body
{
    background-color: rgb(30, 33, 50);
}
div{
    overflow-x: auto;
}
table{
    margin-top: 4vw;
    
}
th{
    
    font-family: sans-serif;
    font-size :20px;
    color: rgb(108, 186, 224);
}
th,td
{
     padding: 1.25vw 12.5vw 1.25vw 1.25vw;  
    /* padding: 20px 200px 20px 20px;  */
}
tr:nth-child(even)
{
background-color: rgb(45, 50, 69);
}
tr:nth-child(odd)
{
background-color: rgb(38, 44, 60);
}
tr:nth-child(1)
{
background-color: rgb(30, 33, 50);
}
th,td{
    text-align: left;
}
/***************************************************************************************************/
td.Google{    
    font-family: sans-serif;
    font-size: 18px;
    color: rgb(250, 83, 113);
    
    
}
td.Amazon{    
    font-family: sans-serif;
    font-size: 18px;
    color: rgb(250, 83, 113);
    
    
}
td.Twitter{    
    font-family: sans-serif;
    font-size: 18px;
    color: rgb(250, 83, 113);
}

解决方案 #

在现有CSS代码末尾添加以下样式即可实现需求，同时确保表头行不受悬停效果影响：

/* 数据行鼠标悬停时整行背景变黄，表头行保持原有样式 */
tr:hover:not(:first-child) {
    background-color: yellow;
}

这样设置后，鼠标悬停任意数据行的单元格时，该行所有单元格的背景都会变为黄色，表头行维持原有深色背景不变。

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