Machen Sie jedes Quadrat in einem Raster ändern Farbe beim Schweben mit CSS

Question

Ich erstellte ein Raster aus grauen Quadraten mit CSS. Ich möchte, dass alle schwarz werden, wenn ich über einem der Quadrate schwebe. Meine derzeitige Lösung wird nur das Quadrat drehen, über dem ich schwarz schwebe. Kann ich das nur mit CSS tun? Ich stelle mir vor, dass es Spannen braucht. Unten ist der Code:

.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

Hier finden Sie die .square Elemente in einem Behälter wickeln wollen, dann unter die CSS verwenden.

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/