本次实操主要是对之前定位练习的一个补充，实现鼠标悬停在手机上，手机两面图片岔开的效果。
代码如下：
<!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>具体实现效果为：
一开始是这样的，鼠标没有悬停在上面时：
在鼠标悬停在上面时，照片往两边分开：
