网页hover用法

CSS代码

body{
                padding-top: 150px;
                text-align: center;
                background-color: black;
                font-family: "楷体";
            }
            th{
                
                background-color: ghostwhite;
                color: black;
            }
        /*     tr:hover{
                background-color:  ghostwhite;
                color: black;
                
                
            } */
            h1{
                text-align: center;
                color: ghostwhite;
            }
            tr{
                color: ghostwhite;
            }
        
            .box1:hover{
                background-color: red;
            }
            
            .box1:hover~.box2{
                background-color: lightcoral;
            }
            .box1:hover~.box3{
                background-color: yellow;
                color: #000000;
            }
            .box1:hover~.box4{
                background-color: green;
            }
            .box1:hover~.box5{
                background-color: springgreen;    
                color: #000000;
            }
            /* 2 */
            .box2:hover{
                background-color: red;
            }
            
            .box2:hover~.box3{
                background-color: lightcoral;
            }
            .box2:hover~.box4{
                background-color: yellow;
                color: #000000;
            }
            .box2:hover~.box5{
                background-color: green;
            }
            
            /* 3 */
            .box3:hover{
                background-color: red;
            }
            
            .box3:hover~.box4{
                background-color: lightcoral;
            }
            .box3:hover~.box5{
                background-color: yellow;
                color: #000000;
            }
        /* 4 */
        .box4:hover{
            background-color: red;
        }
        
        .box4:hover~.box5{
            background-color: lightcoral;
        }
        /* 5 */
        .box5:hover{
            background-color: red;
        }

HTML代码

        <h1 >化学实验分组表</h1>
        <table border="1" cellpadding="0" cellspacing="0" align="center" width="800px" height="300px">
            <tr>
                <th>组</th>
                <th colspan="5">成员</th>
                
            </tr>
            <tr>
                <th>第一组</th>
                
                
                <td class="box1">孙磊</td>
                <td class="box2">王萍</td>
                <td class="box3">杨幂</td>
                <td class="box4">安贡</td>
                <td class="box5">安康</td>
                
            </tr>
            <tr>
                <th>第二组</th>
                <td class="box1">赵丽</td>
                <td class="box2">杨幂</td>
                <td class="box3">张梅</td>
                <td class="box4">杨浩</td>
                <td class="box5">刘丽</td>
            </tr>
            <tr>
                <th>第三组</th>
                <td class="box1">刘霞</td>
                <td class="box2">李煜</td>
                <td class="box3">明亮</td>
                <td class="box4">徐明</td>
                <td class="box5" >科技</td>
            </tr>
            <tr>
                <th>第四组</th>
                <td  class="box1">孙霞</td>
                <td class="box2">周舒</td>
                <td class="box3">百花</td>
                <td class="box4">紫玉</td>
                <td class="box5">潘森</td>
            </tr>
            <tr>
                <th>第五组</th>
                <td class="box1">剑圣</td>
                <td class="box2">炸弹</td>
                <td class="box3">周毅</td>
                <td class="box4">潘森</td>
                <td class="box5">紫玉</td>
            </tr>
            <tr>
                <th>第六组</th>
                <td class="box1">刘霞</td>
                <td class="box2">潘森</td>
                <td class="box3">严明</td>
                <td class="box4">洛克</td>
                <td class="box5">天意</td>
            </tr>
        </table>