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 - 它并不重要）在鼠标悬停时仅在Y轴上更改所有td background-position？

Answer 1

如果您希望将鼠标悬停在桌面上影响所有 <td>个单元格，您可以do that too：

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%;
}

Answer 2

对于纯CSS解决方案，请尝试添加：

td:hover { background-position:something; }

然后将内容更改为您想要的内容或添加更多属性。

希望这有帮助！

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

2 个答案: