会员可以在此提问,百战程序员老师有问必答
对大家有帮助的问答会被标记为“推荐”
看完课程过来浏览一下别人提的问题,会帮你学得更全面
截止目前,同学们一共提了 133653个问题
JAVA 全系列/第四阶段:数据库与AI协同技术实战/Oracle 数据库的使用 30106楼
WEB前端全系列/第七阶段:ECMAScript6新特性模块/ES6第二部分 30108楼
Python 全系列/第一阶段:Python入门/序列 30109楼
JAVA 全系列/第四阶段:数据库与AI协同技术实战/JDBC技术(旧) 30111楼
JAVA 全系列/第四阶段:数据库与AI协同技术实战/Oracle 数据库的使用 30113楼


JAVA 全系列/第十一阶段:百战旅游网项目/百战旅游网 30114楼
WEB前端全系列/第七阶段:ECMAScript6新特性模块/ES6第一部分 30115楼
JAVA 全系列/第一阶段:AI驱动的JAVA编程/变量、数据类型、运算符 30116楼
JAVA 全系列/第四阶段:数据库与AI协同技术实战/Oracle 数据库的使用 30117楼
JAVA 全系列/第十八阶段:亿级高并发电商项目_架构/编码(旧)/电商:基于FastDFS+Nginx+Kinkeditor实现商品新增 30118楼

style>
        .box{
            width: 234px;
            height: 300px;
            background-color: pink;
            position: relative;
            overflow: hidden;
        }
        .box1{
            width: 100%;
            height: 76px;
            background-color: orange;
            /*绝对定位  相对于已经定位的父元素定位*/
            position: absolute;
            /*据父元素上面的距离为300px*/
            top: 300px;
            /*据父元素的左侧距离为0*/
            left: 0px;
        }
        /*鼠标悬停在box上,子代box1*/
        .box:hover>.box1{
           /*据父元素上面的距离变为224*/
            top: 224px;
        }
        .box2{
            width: 303px;
            height: 375px;
            background-color: red;
            position: relative;
        }
        .box2>img{
            width: 100%;
            height: 100%;
        }
        .box3{
            width: 100%;
            height: 100%;
            background-color: salmon(0,0,0,.2);
            position: absolute;
            top: 0px;
            left: 303px;
        }
        .box2:hover>.box3{
            left: 0;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="box1"></div>
    </div>
    <div class="box2">
        <img src="img/370ad36f-425c-453a-b406-ccb2a0dffeec.jpg" alt="">
        <div class="box3"></div>
    </div>
</body>
</html>

老师,我这个代码哪里不对吗?为啥达不到老师说的效果


WEB前端全系列/第一阶段:HTML5+CSS3模块/CSS常用属性 30119楼
JAVA 全系列/第五阶段:网页编程和设计/jQuery 30120楼

课程分类

百战程序员微信公众号

百战程序员微信小程序

©2014-2025百战汇智(北京)科技有限公司 All Rights Reserved 北京亦庄经济开发区科创十四街 赛蒂国际工业园
网站维护:百战汇智(北京)科技有限公司
京公网安备 11011402011233号    京ICP备18060230号-3    营业执照    经营许可证:京B2-20212637