Question

我使用CSS创建了一个灰色方块网格。当我将鼠标悬停在任何方格上时，我希望它们全部变成黑色。我目前的解决方案只会转动我悬停黑色的方块。我可以只使用CSS吗？我想它将涉及使用跨度。以下是代码：

＆＃13;

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

＆＃13;

<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>

＆＃13;

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;
}

小提琴：http://jsfiddle.net/ajjr68ho/

使用CSS悬停时，使网格中的每个正方形变为颜色

1 个答案: