效果图：

思路
使用无序列表，当鼠标移到li身上，使用hover改变背景图的位置。
为了不一下子显示到设定目标值可以添加一个transition过度效果

第一步：

    先给li设定背景图，在给每个li单独取一个class类名以此来调整背景图的位置

第二步：

   对每个li设置单独的hover效果，通过background-position来调整目标值

第三步：

    给li加上一个transition动画效果，这样就不会一瞬间出现，看着有一个过度效果。

css

ul {

                text-align: center;
            }

            li {
                vertical-align: middle;
                display: inline-block;
                width: 49px;
                height: 49px;
                background: url(图片地址) no-repeat;
                margin: 0 10px;
                transition: all 0.5s;
                background-color: saddlebrown;
            }

            .f-1 {
                background-position: 0px 0px;
                }

            .f-2 {
                background-position: -43px 0px;
            }

            .f-3 {
                background-position: -86px 0px;
            }

            .f-4 {
                background-position: -130px 0px;
            }

            .f-1:hover {
                background-position: 0px -42px;

            }

            .f-2:hover {
                background-position: -43px -42px;
            }

            .f-3:hover {
                background-position: -86px -42px;
            }

            .f-4:hover {
                background-position: -130px -42px;

            }

HTML

      <ul>
            <li class="f-1"></li>
            <li class="f-2"></li>
            <li class="f-3"></li>
            <li class="f-4"></li>
        </ul>