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

实现效果：当鼠标滑过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>
HTML+CSS实现鼠标滑过tab页切换

猜你喜欢
