HTML+CSS实现鼠标滑过tab页切换

雨点打透心脏的1/2处 2022-12-04 01:03 499阅读 0赞

实现效果：当鼠标滑过tab标签时，实现对应标签的内容切换

<!DOCTYPE html>
    <html>
    
    <head>
        <title>demo</title>
        <style>
            div {
                position: relative;
                width: 1550px;
                height: 900px;
                padding: 0;
            }
    
            li {
                list-style: none;
                float: left;
                width: 150px;
                height: 40px;
                line-height: 40px;
                border: 1px solid pink;
                box-sizing: border-box;
                margin-left: -1px;
                text-align: center;
                cursor: pointer;
            }
    
            li .detail {
                display: none;
                position: absolute;
                border: 1px solid pink;
                width: 1000px;
                height: 800px;
                left: 39px;
                top: 39px;
                z-index: -1;
            }
    
            li:hover {
                border-bottom-color: #fff;
            }
    
            li:hover .detail {
                display: block;
            }
        </style>
    </head>
    
    <body>
        <div>
            <ul>
                <li>
                    <span>tab1</span>
                    <div class="detail">tab1 content</div>
                </li>
                <li>
                    <span>tab2</span>
                    <div class="detail">tab2 content</div>
                </li>
                <li>
                    <span>tab3</span>
                    <div class="detail">tab3 content</div>
                </li>
                <li>
                    <span>tab4</span>
                    <div class="detail">tab4 content</div>
                </li>
                <li>
                    <span>tab5</span>
                    <div class="detail">tab5 content</div>
                </li>
            </ul>
        </div>
    </body>
    
    </html>