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

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

本文关键字：CSS 背景 位置 轴的 jQuery-      更新时间：2023-09-26

所以假设我有一个这样的表：

<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-position？

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

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

td:hover { background-position:something; }

然后将某个东西更改为您想要的，或者添加更多属性。

希望这能有所帮助！

相关文章：