TypechoJoeTheme

代码屋

统计
登录
用户名
密码
/
注册
用户名
邮箱

代码屋

拼一个春夏秋冬|赢一个无悔人生
类目归类
Web

网页hover用法

2020-11-17
/
0 评论
/
198 阅读
/
正在检测是否收录...
11/17

网页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>
    
网页hover用法
朗读
赞 · 1
赞赏
感谢您的支持,我会继续努力哒!

三合一收款

下面三种方式都支持哦

微信
QQ
支付宝
打开支付宝/微信/QQ扫一扫,即可进行扫码打赏哦
版权属于:

代码屋

本文链接:

https://daimawu.top/Web/10.html(转载时请注明本文出处及文章链接)

评论 (0)