web前端学习笔记---鼠标控制悬浮框的出现与消失

初学前端,随手记录日常所遇问题,可以时常回顾,若能帮助别人则更好,若有不妥之处或更为便捷之法,希望以评论告知,谢谢!

实现的效果为:当鼠标悬浮在头像上时,悬浮框浮现,否则悬浮框消失

     <div class="user">
            <a class="user"><img src="./img/user.png"></a>
            <div class="orderInfo">
                <div><img class="topicon" src="./img/topicon.png"></div>
                <img class="user-avatar" src="./img/user-avatar.png">
                <p class="number">+86&nbsp;138******35</p>
                <ul>
                    <li><div><a><span>我的订单</span></a></div></li>
                    <li><div><a><span>售后服务</span></a></div></li>
                    <li><div><a><span>我的优惠</span></a></div></li>
                    <li><div><a><span>账户资料</span></a></div></li>
                    <li><div><a><span>收货地址</span></a></div></li>
                    <li><div><a><span>退出</span></a></div></li>
                </ul>
            </div>
        </div>

上面是body所写的内容
下面为style样式

           ul{
                padding: 0;
                margin: 0;
            }
            li{
                list-style: none;
            }
            body{
                background:#e8e8e8;
            }
            .user{
               margin-left:100px;
               position: relative;
               height: 100px;
               line-height: 100px;
            }
            .user a:first-child img{
                width: 20px;
                height: 20px;  
            }
            .orderInfo{
                visibility: hidden;
                position: absolute;
                top:30px;
                left: 20px;
                z-index: 30;
                width: 168px;
                height: 370px;
                background-color: #fff;
                border-radius: 8px;
                line-height: 30px;
                text-align: center;
                background-size: 30px;
            }
            .topicon{
                position: absolute;
                top: -7px;
                left: 80px;
            }
            .user-avatar{
                width: 50px;
                height: 50px;
                margin-top:10px;
                border-radius: 50%;
                /*向框添加一个或多个阴影*/
                box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06); 
            }
            .number{
                line-height: 30px !important;
            }
            .orderInfo ul li div{
                text-align: left;
                line-height: 40px;
                border-top: 1px solid #f5f5f5;
            }
            .orderInfo ul li div{
                background-size: 15px;
            }
            .orderInfo ul li div a span{
                margin-left: 50px;
            }
            .user:hover .orderInfo{
                visibility: visible;
                transition: opacity .15s ease-out;
            }