How to apply CSS to 2x2 <td> classes? - html

Question

I have HTML table with 5x5 cells. When hovering on any <td> I need to change the background of a 2x2 block of 4 cells. Here is the code to change the background in the current row.
td.1:hover, td.1:hover + td.1 {
background:#eee;
}
I don't know how to change the background in the row like this:

Answer 1

With CSS only, you could only affect the TD's children or next sibling. I.e., you could extend the background to the TD next to the one you hover but not on another row.
To do what you want to do, you would have to use JavaScript, as you would need to walk up and down the DOM, something CSS does not allow you to do.
To do this with jQuery, for example, try something like this:
$('td').hover(function () {
var t = $(this),
index = t.index(); // the position of the TD in the row, so you can find the one below it
t.addClass('hovered'); // apply hovered class to this TD...
t.next().addClass('hovered'); // ...and to the TD next to it...
t.closest('tr').next().find('td:eq(' + index + ')').addClass('hovered').next().addClass('hovered'); // ...and to the 2 below
}, function () {
// remove the hovered class when no longer hovering
$(this).closest('table').find('td').removeClass('hovered');
});
And in your CSS give whatever styling to the 'hovered' class you want.
DEMO 1
If, however, you want to change the background of the exact same 4 TDs every time you hover over any TD in the table, this can be done purely with CSS. Just give a class name to the 4 cells you want highlighted. Let's call this class 'block2x2' for example. Then your CSS is:
table:hover .block2x2 {
background: #eee; // whatever background style you want
}
DEMO 2