作为CSS Sprite滚动

Question

我创建了这个滑块，现在我想在其中放置一些图像，并在悬停时图像应该是彩色的..（精灵）

<div class="client-wrapper ">
    <ul class="happy-clients clearfix ">
        <li>
            <img src="http://placehold.it/350x150" alt="client 1">
        </li>
        <li>
            <img src="http://placehold.it/350x150" alt="client 2">
        </li>
        <li>
            <img src="http://placehold.it/350x150" alt="client 3">
        </li>
        <li>
            <img src="http://placehold.it/350x150" alt="client 4">
        </li>
        <li>
            <img src="http://placehold.it/350x150" alt="client 5">
        </li>
        <li>
            <img src="http://placehold.it/350x150" alt="client 5">
        </li>
        <li>
            <img src="http://placehold.it/350x150" alt="client 5">
        </li>
        <li>
            <img src="http://placehold.it/350x150" alt="client 5">
        </li>
    </ul>
</div>

这是我的滑块，我尝试添加此css，但它不起作用：

#test {
    height: 42px;
    width: 42px;
    background-image: url(http://img826.imageshack.us/img826/6568/homebi.png);
    background-repeat: no-repeat;
    background-color: transparent;
    background-position: top;
}
#test:hover {
    background-position: bottom;
}

我需要在哪里添加此ID，还是有其他选项..