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

Question

So let's say I have a table like this one:

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

I have a spritesheet containing 4 different images of the same size. So I used simple CSS background-position to position a background for each table cell. Here's my question:

Is there any way (jQuery or pure CSS - it doesn't matter) to change ALL td background-positions only on Y axis on mouse hover?

create http://jsfiddle.net with images please – ieblake Apr 06 '15 at 16:13 — ieblake, Apr 06 '15 at 16:13

score 5 · Accepted Answer · answered Apr 06 '15 at 16:14

5

If you want to make hovering over the table affect all the <td> cells, you can 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%;
}

answered Apr 06 '15 at 16:14

Pointy

405,095
59
585
614

I still need to change only the Y axis... When I try this code it works as expected but all the different images change to the first one that is on 0 X axis when I hover... I mean each image has 2 versions in the stylesheet when I hover on one image I should get the second version of that image. – PowerUser Apr 06 '15 at 16:28
@Charlie I don't understand. What exactly do you mean by "Y axis"? The posted code (by way of example) moves the images down, which is what I think of as the "Y axis" on a page (up/down, with left/right being the X axis). – Pointy Apr 06 '15 at 16:30
@Charlie oh - well my demo uses just a stock sample image. If you did it with a multi-image "sprite", you'd change the CSS rule so that the Y position changes to shift the desired portion of the image into view. If your images are (for example) 50px tall, then `0 50px` would move from the top image to the second image in your sprite. – Pointy Apr 06 '15 at 16:31
alright here's my code: http://codepen.io/anon/pen/zxQwKa You know I could've used `background-positon-y` if FF supported it but oh well... There is a link to the spritesheet in the CSS tab. – PowerUser Apr 06 '15 at 16:49
@Charlie Ah - so you want the position to change by some amount, not to some absolute amount. In other words you want to do something like subtract 14px from whatever the base setting is, right? – Pointy Apr 06 '15 at 16:56
Correct letters are black, when hover they become yellow. – PowerUser Apr 06 '15 at 16:57
I don't know if there's a way to do that that's less painful that repeating the CSS rule for every one of your classes :/ Because `background-position` has to be set with both dimensions, you're kind-of stuck I think. – Pointy Apr 06 '15 at 16:57
OK, looks like you're right... Thanks anyways. – PowerUser Apr 06 '15 at 17:00

shaun · Answer 2 · 2015-04-06T16:13:56.973

1

For a pure CSS solution try adding:

td:hover { background-position:something; }

Then change the something to what you desire or add more attributes.

Hope this helped!

edited Apr 06 '15 at 16:13

answered Apr 06 '15 at 16:13

shaun

1,017
11
22

I could add this for each separate table cell, but what if I had like 100 cells all with different images? I will have to add so much more to my stylesheet... – PowerUser Apr 06 '15 at 16:16
This is true but you stated in the question for it to apply to **all**, and I made my answer accordingly. – shaun Apr 06 '15 at 16:32

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

2 Answers2