html - 使用 CSS 使网格中的每个正方形在悬停时改变颜色

Question

我使用 CSS 创建了一个灰色方 block 网格。当我将鼠标悬停在任何正方形上时，我希望它们全部变黑。我当前的解决方案只会将我悬停的方 block 变成黑色。我可以只使用 CSS 来做到这一点吗？我想这将涉及使用跨度。下面是代码:

.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

您需要将 .square 元素包装在一个容器中，然后使用下面的 CSS。

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/