html - 如何将 CSS 应用于 2x2 类？

Question

我有HTML5x5 单元格的表格。当悬停在任何<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 中，为您想要的“悬停”类提供任何样式。

演示 1

但是，如果您希望每次将鼠标悬停在表格中的任何 TD 上时都更改完全相同的 4 个 TD 的背景，则可以纯粹使用 CSS 来完成。只需为要突出显示的 4 个单元格命名。例如，我们称这个类为“block2x2”。那么你的CSS是：

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

演示 2