关于以下问题如何解决

img

这个是个精灵图，支付宝首页下方就和这个类似，运用 hover效果，配合图片定位（background - position ） .。
这样的效果我们做过很多，尤其是支付宝这个，兔小白，博雅等
下面这个是我们做的支付宝首页下方的代码 可以参考下 。

图片：

img

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
    <style>
        /*精灵图*/
        .jl{
            width: 200px;
            margin:0 auto;
            }
        /*每一个精灵图所在a统一样式*/
        .jl a{
            display: inline-block;
            height: 28px;
            margin-right: 5px;
            /*border:1px solid red;*/
            background-image: url(bottom.png);
            background-repeat: no-repeat;
            }
        /*精灵图默认的定位*/
        .pic1{
            width: 18px;
            background-position: -1px -5px;
            }
        .pic2{
            width: 40px;
            background-position: -32px -5px;
            }
        .pic3{
            width: 33px;
            background-position: -75px -5px;
            }
        .pic4{
            width: 18px;
            background-position: -115px -5px;
            }
        .pic5{
            width: 20px;
            background-position: -200px -5px;
            }
         /*精灵图hover重新定位*/
        .pic1:hover{
            background-position: 0px -28px;
            }
        .pic2:hover{
            width: 40px;
            background-position: -31px -28px;
            }            
        .pic3:hover{
            width: 33px;
            background-position: -74px -28px;
            }
        .pic4:hover{
            width: 18px;
            background-position: -114px -28px;
            }
        .pic5:hover{
            width: 20px;
            background-position: -200px -26px;
            }
    </style>
<body>
    <div class="jl">
        <a href="" class="pic1"></a>
        <a href="" class="pic2"></a>
        <a href="" class="pic3"></a>
        <a href="" class="pic4"></a>
        <a href="" class="pic5"></a>
    </div>
</body>
</html>

hover