Zmieniaj każdy kwadrat w kolorze siatki po najechaniu kursorem za pomocą CSS

Question

Utworzono siatkę szarych kwadratów przy użyciu CSS. Chcę, aby wszystkie zmieniły kolor na czarny, gdy ustawię się nad dowolnym z kwadratów. Moje obecne rozwiązanie obróci tylko kwadrat, nad którym zaznaczam kolor czarny. Czy mogę to zrobić za pomocą samego CSS? Wyobrażam sobie, że będzie to wymagało użycia przęseł. Poniżej znajduje się kod:

.square { 
 
    background-color: #737373; 
 
    float: left; 
 
    position: relative; 
 
    width: 30%; 
 
    padding-bottom: 30.66%; 
 
    margin: 1.66%; 
 
} 
 
.square:hover { 
 
    background-color: black; 
 
}

<div class="square"></div> 
 
<div class="square"></div> 
 
<div class="square"></div> 
 
<div class="square"></div> 
 
<div class="square"></div> 
 
<div class="square"></div> 
 
<div class="square"></div> 
 
<div class="square"></div> 
 
<div class="square"></div>

Answer 1

Będziemy chcieli, aby owinąć .square elementy w pojemniku, a następnie użyć CSS poniżej.

HTML:

<div id="container"> 
    <div class ="square"></div> 
    <div class ="square"></div> 
    <div class ="square"></div> 
    ... 
</div> 

CSS

#container:hover .square{ 
    background-color:black; 
} 

Fiddle: http://jsfiddle.net/ajjr68ho/