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

原文 标签 javascript jquery html css sprite-sheet

这个问题在这里已经有了答案:





Is it possible to change only the Y value of background position in CSS?

(6 个回答)


6年前关闭。




所以假设我有一张这样的 table :

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

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

有什么方法(jQuery 或纯 CSS - 没关系)来更改所有 td background-position s 仅在鼠标悬停时的 Y 轴上?

最佳答案

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

关于javascript - jQuery - 仅更改 Y 轴的 CSS 背景位置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29474925/

相关文章:

javascript - 使用自动刷新将DIV代码更改为iframe

javascript - 如何将 d3.js 中时间刻度的缩放限制为分钟?

javascript - 带坐标的 HTML5 拖放

javascript - 仅显示单击链接的内容并隐藏所有同级

php - 基于类别动态自动完成

javascript - 如何在每个页面请求上发送一个ajax调用,并使用ajax调用的结果对DOM进行更改?

javascript - Paper JS 填充颜色闭合路径

javascript - "$()"选择器中额外的 "$($())"有什么作用?

html - 连续图像旁边的CSS正确对齐

javascript - 使用embed或iframe在模态下以 Angular 4上传之前进行预览