jQuery

Question

假设我有一个像这样的table：

<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 为每个 table 单元格定位背景。这是我的问题：

有什么办法（jQuery 或纯 CSS - 没关系）在鼠标悬停时仅在 Y 轴上更改所有 td background-positions 吗？

Answer 1

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

td:hover { background-position:something; }

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

希望对您有所帮助！

Answer 2

如果你想让悬停在 table 上影响所有 <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%;
}

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

jQuery - Change CSS background-position for Y-axis only

html

javascript

css

sprite-sheet