css通过display:block实现侧边栏隐藏弹出效果

需求：网页右侧边栏悬浮窗，鼠标悬停后为选中状态，同时展开信息卡，鼠标移开，变回原状态，如下图所示：

        

实现思路：1、写出5个div,固定好位置，

                  2、div添加伪类标签::befor和::after（注意：要将伪类标签转为块级元素）

                  3、通过定位让伪类标签覆盖在div上，将图标作为背景图放进去（这里准备了两张背景图）

                 4、写放二维码等信息的div,将其定位到合适的位置

                  5、给要隐藏的元素设置display:none属性进行隐藏

                   6、给div设置hover效果，当鼠标移入时让dispiay的值变为block,从而让元素显示出来

                   7、最后小火箭通过jqurey方法点击实现返回顶部效果（不是重点，比较简单，实现看代码）

综上，通过伪类标签、display属性、hover效果实现纯css控制元素的隐藏和显示。

代码段：

HTML页面结构

<div class="floatBox">
    <div class="iconbox1">
        <div class="weixin">
            <div class="info">
                <img src="" alt="二维码">
                <p>微信扫码联系客服</p>
            </div>
        </div>
    </div>
    <div class="iconbox2">
        <div class="tel">
            <div class="telNumber">
                <p>拨打电话</p>
                <p>182-3404-5203</p>
            </div>
        </div>
    </div>
    <div class="iconbox3">
        <div class="weixin">
            <div class="info">
                <img src="" alt="二维码">
                <p>微信小程序</p>
            </div>
        </div>
    </div>
    <div class="iconbox4">
        <div class="weixin">
            <div class="info">
                <img src="" alt="二维码">
                <p>微信扫码进求职群</p>
            </div>
        </div>
    </div>
    <div class="iconbox5" >
    </div>
</div>
<script>
     $(".iconbox5").click(function(){
        $('body,html').animate({scrollTop:0},300)//点击回到顶部的空件，窗口回到最顶端
    })
</script>

 Css样式

/* 侧边悬浮框 */
.floatBox {
    position: fixed;
    top: 40%;
    right: 2%;
    width: 70px;
    background: #FFFFFF;
    box-shadow: 0px 0px 40px 0px rgba(72, 72, 72, 0.04);
    border-radius: 4px;
}

.iconbox1 {
    height: 81px;
    width: 70px;
    position: relative;
}

.iconbox1::after {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    background: url(../images/icon/right/zx2.png)no-repeat center center;
    position: absolute;
    left: 0;
    top: 0;
}

.iconbox1::before {
    content: '';
    display: none;
    width: 100%;
    height: 100%;
    background: url(../images/icon/right/zx.png)no-repeat center center;
    position: absolute;
    left: 0;
    top: 0;
}

.weixin {
    position: absolute;
    width: 150px;
    height: 170px;
    background: #FFFFFF;
    box-shadow: 0px 0px 40px 0px rgba(72, 72, 72, 0.04);
    border-radius: 4px;
    left: -154px;
    top: 0;
    display: none;
    padding: 21px 25px 24px;
}

.info {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.info>img {
    width: 100px;
    height: 100px;
    border: 1px solid #0092FF;
}

.info>p {
    width: 105px;
    height: 13px;
    font-size: 13px;
    font-weight: 400;
    color: #262626;
    margin-top: 12px;
}

.iconbox1:hover::before {
    display: block;
}

.iconbox1:hover::after {
    display: none;
}

.iconbox1:hover .weixin {
    display: block;
}