html - 16 x 16 色块组 CSS + HTML

Question

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

我想做的是，当我悬停一个块时，它会显示整个组以某种方式像一个边框（如图 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

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