16 x 16颜色块组CSS + HTML

Question

我有以下问题，我在页面上有一堆16 x 16块，流畅的布局（第1张图片）。这些块也属于一个组，这些组在第二个图像中突出显示

我想要做的是当我悬停一个块时，它显示整个组在某种程度上像边框（如图3所示）唯一的限制是块必须保持相同的颜色。 - 是的，同一组中的区块总是在每个区域旁边。

我的第一次尝试是

<div class="container">
  <div class="group">
    <div class="color-block"></div>
    ...
    <div class="color-block"></div>
  </div>
  <div class="group">
    <div class="color-block"></div>
    ...
    <div class="color-block"></div>
  </div>
  <div class="group">
    <div class="color-block"></div>
    ...
    <div class="color-block"></div>
  </div>
</div>

其中.group为display:inline-block，但当一组进入两行时会出现这种情况（见下图）

非常感谢任何帮助。

Answer 1

使用CSS无法使用:hover创建不规则的轮廓。您必须使用JavaScript来确定相邻块的位置并相应地设置它们的样式。