如何将CSS应用于2x2课程？

Question

我有HTML表，有5x5个单元格。当悬停在任何<td>上时，我需要更改4个单元格的2x2块的背景。以下是更改当前行背景的代码。

td.1:hover, td.1:hover + td.1 {
    background:#eee;
}

我不知道如何更改行中的背景：

Answer 1

仅使用CSS，您只能影响TD的孩子或下一个兄弟。也就是说，您可以将背景扩展到您悬停的TD旁边，而不是另一行。

要做你想做的事情，你必须使用JavaScript，因为你需要在DOM上走动，这是CSS不允许你做的事情。

要使用jQuery执行此操作，例如，请尝试以下操作：

$('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');
});

在你的CSS中，为你想要的'hovered'课程提供任何风格。

DEMO 1

但是，如果您希望每次将鼠标悬停在表格中的任何TD上时更改完全相同的4个TD的背景，则可以使用CSS 完成此操作。只需为要突出显示的4个单元格指定一个类名。我们将此类称为“block2x2”。然后你的CSS是：

table:hover .block2x2 {
    background: #eee; // whatever background style you want
}

DEMO 2