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來確定相鄰塊的位置並相應地設置它們。