实现滑动门

最新推荐文章于 2024-06-23 20:25:37 发布

「已注销」

最新推荐文章于 2024-06-23 20:25:37 发布

阅读量91

点赞数

分类专栏：案例文章标签： css html css3

本文链接：https://blog.csdn.net/lyc_3858/article/details/125895132

版权

案例专栏收录该内容

15 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>滑动门</title>
    <!-- 逻辑:给ul相对定位,在每个li里放每个li对应的内容,然后给内容绝对定位,
        让内容根据ul的位置移动(为了让li里的内容在同一位置),然后隐藏内容,通过鼠标移动到li,
让li里的内容显示
    -->
    <!-- 需求如果是鼠标移动到一个元素,然后另一个元素显示,那必须是移动到父代,然后子代显示 -->
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        ul,
        li,
        ol {
            list-style-type: none;
        }
        a {
            text-decoration: none;
            color: black;
        }
        /* 上面样式无关 */

        ul {
            margin: 0 auto;
            width: 100px;

            /* 相对定位 */
            position: relative;
        }
        li:hover {
            background-color: orange;
        }
        div {
            width: 200px;
            background-color: orange;

            /* 继承父元素高度,有定位的元素会继承最近有定位的父元素高度,
            如果没有就会一直往外找,都没有就继承body高度 */
            height: 100%;   

            /* 绝对定位 绝对定位脱离文档流是全脱离,浮动是半脱离 */
            position: absolute;

            /* 绝对定位位移,根据最近的有定位的父元素位移,都没有,
            那么绝对定位的元素就根据body位移,相对定位就根据自身位移 */
            top: 0px;
            left: 100px;

            /* 隐藏 */
            display: none;
        }
        ul li:hover div {
            display: block;
        }
    </style>
</head>
<body>
    <ul>
        <li><a href="#">手机</a>
            <div>手机</div>
        </li>
        <li><a href="#">电视</a>
            <div>电视</div>
        </li>
        <li><a href="#">平板</a>
            <div>平板</div>
        </li>
    </ul>
</body>
</html>