css utilise display:block pour implémenter l'effet pop-up caché dans la barre latérale

Conditions : Une fenêtre flottante dans la barre latérale droite de la page Web. Après avoir survolé la souris, elle sera dans l'état sélectionné. En même temps, la carte d'information sera développée. Lorsque la souris est déplacée, elle reviendra à l'état sélectionné. état d'origine, comme le montre la figure suivante :

        

Idées de mise en œuvre : 1. Écrivez 5 divs et corrigez leurs positions.

                  2. Ajoutez des balises de pseudo-classe ::before et ::after à div ( Remarque : convertissez les balises de pseudo-classe en éléments de niveau bloc )

                  3. Positionnez la balise pseudo-classe pour couvrir le div et placez l'icône comme image d'arrière-plan (deux images d'arrière-plan sont préparées ici)

                 4. Écrivez le div contenant le code QR et d'autres informations et positionnez-le dans la position appropriée.

                  5. Définissez l'attribut display:none sur l'élément à masquer pour le masquer.

                   6. Définissez l'effet de survol sur le div. Lorsque la souris entre, laissez la valeur de display changer en block, afin que l'élément puisse être affiché.

                   7. Enfin, Little Rocket clique sur la méthode jqurey pour obtenir l'effet de retour en haut (pas le point clé, c'est relativement simple, voir le code d'implémentation)

En résumé, les éléments de contrôle CSS purs sont masqués et affichés via des balises de pseudo-classe, des attributs d'affichage et des effets de survol.

Extrait de code:

Structure des pages 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>

 Style 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;
}