Make each square in grid color change on hover using CSS

Question

I created a gray square grid using CSS. I want everyone to turn black when I hover over any square. My current solution will turn only the square above which I find black. Can I do this using only CSS? I guess this will require the use of spaces. 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 want to wrap the .square elements in a container, and 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/