Make each square in a grid change color on hover with CSS

Question

I created a grid of gray squares using CSS. I want them all to turn black when I hover over any of the squares. My current solution will only turn the square over which I hover black. Can I do this using just CSS? I imagine it will involve using spans. Below is the 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

You'll want to wrap the .square elements in a container, then use the CSS below.

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/