【Web前端实操22】定位实操_鼠标悬停在手机上，手机两面图片岔开

最新推荐文章于 2024-07-23 12:36:06 发布

墨倾许

最新推荐文章于 2024-07-23 12:36:06 发布

阅读量403

点赞数 5

分类专栏： Web前端实操文章标签：前端 css html 开发语言 html5

本文链接：https://blog.csdn.net/qq_45498824/article/details/135839822

版权

Web前端实操专栏收录该内容

22 篇文章 0 订阅

订阅专栏

本次实操主要是对之前定位练习的一个补充，实现鼠标悬停在手机上，手机两面图片岔开的效果。

代码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
.box{
    width :290px;
    height: 300px;
    background-color:pink;
    position: relative;
    /* 将溢出部分隐藏掉*/
    overflow: hidden;
}
.box>img{
    width: 120px;
    /* 绝对定位 相对于已经定位的父元素定位 */
    position: absolute;
    /* 距父元素上面的距离为300px */
    top:23px;
    /* 距父元素左侧的距离为0 */
    left:85px;
    }
    /* 当鼠标悬停在box盒子上,子代box1 */
    .box:hover>.img1{
    /*距父元素上面的距离变为224px */
    left: 55px;
}
    .box:hover>.img2{
    /*距父元素左侧的距离变为135px */
    left: 135px;
    /* right: 55px;
    不能写成right，两者具有优先级的效应，不能这样*/
}
</style>
</head>
<body>
    <div class="box">
        <img src="img/3.jpg" alt="" class="img1">
        <img src="img/4.jpg" alt="" class="img2">
    </div>
</body>
</html>