效果图如下:
<style>
.right {
position: fixed;
right: 0;
bottom: 50%;
width: 45px;
height: 45px;
text-align: center;
cursor: pointer;
color: #fff;
}
.right span {
display: inline-block;
width: 100%;
height: 100%;
position: absolute;
top: 0;
right: 0;
background: pink;
}
.right .box2 {
width: 200px;
height: 45px;
position: absolute;
right: -155px;
top: 0;
background: skyblue;
z-index: -1;
transition: all .3s;
line-height: 45px;
}
.right:hover .box2 {
right: 45px;
}
</style>
<div class="right">
<span>我的足迹</span>
<div class="box2">请查看购物车</div>
</div>