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

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

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

     

            
            

                

                
                
+86 138******35
                

                    
我的订单
                    
售后服务
                    
我的优惠
                    
账户资料
                    
收货地址
                    
退出
                
            
        

上面是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;
            }