纯CSS制作小米商城弹出效果

最新推荐文章于 2022-11-01 23:44:31 发布

隙间来客

最新推荐文章于 2022-11-01 23:44:31 发布

阅读量170

点赞数

文章标签： css 前端 html

本文链接：https://blog.csdn.net/weixin_44030866/article/details/126002689

版权

效果图

简单点说就是将弹出界面和hover移入界面重合，使其可以同时触发hover事件

CSS

        .topbar{
            width: 250px;
            height: 450px;
            background-color: #313131;
            position: relative;
            left: 100px;
            top: -100px;
            z-index: 1;
        }
        .topbar ul{
            width: 250px;
            height: 450px;
            position: relative;
            top: 20px;
        }
        .topbar ul li{
            width: 250px;
            height: 40px;
            text-align: left;
            float: left;
        }
        .topbar ul li:hover{
            background-color: orange;
        }
        .topbar ul li a{
            position: relative;
            left: 20px;
            top: 10px;
            color: rgb(218, 218, 218);
        }
        .xft-L{
            width: