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

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