16 x 16カラーブロックグループCSS + HTML

Question

私は以下の問題があります。流体レイアウト（1枚目）のページに16 x 16ブロックの束があります。ブロックはグループにも属し、2番目の画像でグループがハイライト表示されます

私がしたいのは、ブロック全体を表示すると、グループ全体が何らかの形でボーダー（図3に示す）ブロックが同じ色を保たなければならないということです。 - そして、はい、同じグループのブロックは、常に隣にあります。私の最初の試みは.groupだったdisplay:inline-blockが、グループが2行にに行くとき、これは転倒

<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> 

を持っていることでした

（下の画像を参照）

ご協力いただければ幸いです。

Answer 1

CSSを使用して:hoverで不規則なアウトラインを作成することはできません。これを行うには、JavaScriptを使用して、隣接するブロックの位置を決定し、それに応じてスタイルを設定する必要があります。