jQuery - 仅为Y轴更改CSS背景位置

Question

所以,假设我有一个像这样的表:

<table>
    <tr>
        <td class="t"></td>
        <td class="e"></td>
        <td class="s"></td>
        <td class="t"></td>
    </tr>
</table>

我有一个spritesheet包含4个相同大小的不同图像.所以我使用简单的CSS background-position为每个表格单元格定位背景.这是我的问题:

是否有任何方法(jQuery或纯CSS - 无关紧要)td background-position在鼠标悬停时仅在Y轴上更改ALL ？

Answer 1

如果你想将鼠标悬停在表影响所有的<td>细胞,就可以做到这一点:

td {
    background-image: url("http://placekitten.com/120/220");
    background-position: 0 0;
    width: 120px;
    height: 80px;
    border: 1px solid #ddd;
}

table:hover td {
    background-position: 0 50%;
}