jQuery - 仅更改 Y 轴的 CSS 背景位置 [重复]答案

【问题标题】：jQuery - Change CSS background-position for Y-axis only [duplicate]jQuery - 仅更改 Y 轴的 CSS 背景位置 [重复]
【发布时间】：2015-06-11 01:35:25
【问题描述】：

假设我有一张这样的桌子：

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

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

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

【问题讨论】：

请用图片创建jsfiddle.net

标签： javascript jquery html css sprite-sheet

【解决方案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%;
}

【讨论】：

我仍然只需要更改 Y 轴...当我尝试此代码时，它按预期工作，但是当我悬停时，所有不同的图像都会更改为 0 X 轴上的第一个图像.. . 我的意思是每张图片在样式表中有 2 个版本，当我将鼠标悬停在一张图片上时，我应该得到该图片的第二个版本。
@Charlie 我不明白。 “Y轴”到底是什么意思？发布的代码（例如）将图像向下移动，这就是我认为页面上的“Y 轴”（上/下，左/右是 X 轴）。
@Charlie 哦 - 我的演示只使用了一个库存示例图像。如果您使用多图像“精灵”来执行此操作，您将更改 CSS 规则，以便 Y 位置发生变化以将图像的所需部分移动到视图中。如果您的图片（例如）高 50 像素，那么 0 50px 将从您的精灵中的顶部图片移动到第二张图片。
好吧，这是我的代码：codepen.io/anon/pen/zxQwKa 你知道，如果 FF 支持它，我本可以使用 background-positon-y，但是哦……在 CSS 选项卡中有指向 spritesheet 的链接。跨度>
@Charlie Ah - 所以你希望位置改变一些数量，而不是一些绝对数量。换句话说，你想做一些事情，比如从基本设置中减去 14px，对吧？

【解决方案2】：

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

td:hover { background-position:something; }

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

希望这有帮助！

【讨论】：

我可以为每个单独的表格单元格添加这个，但是如果我有 100 个单元格都带有不同的图像怎么办？我将不得不在我的样式表中添加更多内容......
这是真的，但您在问题中声明它适用于所有，我相应地做出了回答。