css uses display:block to implement the sidebar hidden pop-up effect

Requirements: A floating window on the right sidebar of the web page. After hovering the mouse, it will be in the selected state. At the same time, the information card will be expanded. When the mouse is moved, it will return to the original state, as shown in the following figure:

        

Implementation ideas: 1. Write 5 divs and fix their positions.

                  2. Add pseudo-class tags::before and ::after to div ( Note: Convert pseudo-class tags to block-level elements )

                  3. Position the pseudo-class tag to cover the div and put the icon as a background image (two background images are prepared here)

                 4. Write the div containing the QR code and other information and position it in the appropriate position.

                  5. Set the display:none attribute to the element to be hidden to hide it.

                   6. Set the hover effect to the div. When the mouse moves in, let the value of dispiay change to block, so that the element can be displayed.

                   7. Finally, Little Rocket clicks through the jqurey method to achieve the return to the top effect (not the key point, it is relatively simple, see the code for implementation)

In summary, pure CSS control elements are hidden and displayed through pseudo-class tags, display attributes, and hover effects.

Code snippet:

HTML page structure

<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 style

/* 侧边悬浮框 */
.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;
}