仿写小米官网 右边工具导航栏

说明：

1.由于本人只学习了部分html和css，所以本文没有涉及到js部分。
2.本文并没有实现小米官网首页的全部功能，还存在很多问题。如果以后技能提升，会继续更新实现未完成的功能。
3.这个练习会为分几篇文章介绍从最初分析到最后实现的代码，如果发现问题或者有更好的方法请联系本人探讨更正。
4.总体框架分析见博客 《仿写小米官网 简单的HTML+CSS练习》

目标：仿写小米官网的右侧工具导航栏：

HTML元素：

<div class="tool-bar">
            <ul>
                <li class="open-box">
                    <a href="#">
                        <img src="./img/tool-bar-img/1s.png" class="static">
                        <img src="./img/tool-bar-img/1h.png" class="hover">
                        <span>手机APP</span>
                        <div class="app-download" >
                            <img src="./img/tool-bar-img/downapp.png">
                            <span>扫码领取新人百元红包</span>
                        </div>
                    </a> 
                </li>
                <li>
                    <a href="#">
                        <img src="./img/tool-bar-img/2s.png" class="static">
                        <img src="./img/tool-bar-img/2h.png" class="hover">
                        <span>个人中心</span>
                    </a>    
                </li>
                <li>
                    <a href="#">
                         <img src="./img/tool-bar-img/3s.png" class="static">
                        <img src="./img/tool-bar-img/3h.png" class="hover">
                        <span>售后服务</span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="./img/tool-bar-img/4s.png" class="static">
                        <img src="./img/tool-bar-img/4h.png" class="hover">
                        <span>人工客服</span>
                    </a>  
                </li>
                <li>
                    <a href="#">
                        <img src="./img/tool-bar-img/5s.png" class="static">
                        <img src="./img/tool-bar-img/5h.png" class="hover">
                        <span>购物车</span>
                    </a> 
                </li>
            </ul>
        </div>

CSS样式：
代码实现：

/* 首页右侧工具栏 */
    .tool-bar{
        width: 84px;
        height: 460px;
        position: fixed;
        bottom: 70px;
        right: 0;
        z-index: 999;
        background-color: white;
    }
    .tool-bar span{
        color: #9c9c9c;
    }
    .tool-bar ul{
        width: 100%;
        height: 100%;
    }
    .tool-bar li{
        width: 100%;
        height: 90px;
        border: 1px solid #f5f5f5;
        border-right: none;
    }
    .tool-bar li:hover span{
        color: #FF6A00;
    }
    .tool-bar li:hover .static{
        display: none;
    }
    .tool-bar li:hover .hover{
        display: block;
    }
    .tool-bar li img{
        width: 30px;
        height: 30px;
        margin-left: 27px;
        margin-top: 18px;
    }
    .tool-bar li .hover{
        display: none;
    }
    .tool-bar li span{
        display: inline-block;
        width: 100%;
        height: 14px;
        font-size: 14px;
        text-align: center;
    }
    .open-box::before{
        display: none;
        content: '';
        border: 8px solid transparent;
        border-left-color: white;
        position: absolute;
        left: -10px;
        top: 50%;
    }
    .open-box{    
        position: relative;
    }
    .open-box .app-download{
        display: none;
        position: absolute;
        z-index: 999;
        background-color: white;
        right: 94px; 
        padding: 14px;
        width: 100px;
        height: 161px;
        top: 0;
    }
    .open-box .app-download img{
        display: block;
        width: 100px;
        height: 100px;
        margin: 6px auto;
    }
    .open-box .app-download span{
        display: inline-block;
        width: 80px;
        margin-left: 10px;   
    }
    .open-box:hover::before{
        display: block;
    }
    .open-box:hover .app-download span{
        color: #9c9c9c;
    }
    .open-box:hover .app-download{
        display: block;
    }