CSS 网格高亮显示

Question

我正在玩一个网站，该网站在其自己的 div 中有 9 个正方形的 600 像素 x 600 像素网格图像。我希望能够在悬停时突出显示每个网格方 block 并且我已经成功了，但我想知道我的代码是否可以更紧凑。

例如，我的突出显示行为从未改变，但我对其进行编码的方式需要为每个方 block 编写 9 个，我如何才能只使用一个并将其应用于所有网格方 block ？

这是代码。

#theGrid
{
margin-left: auto;
margin-right: auto;
width: 600px;
height:600px;
background-image:url("img/grid.png");
}


#square1
{

top:7px;
left:7px;
width:200px;
height:200px;
background-color:transparent;
}

#square1:hover
{

background-color: yellow;
opacity:0.2;
filter: alpha(opacity=20);

 }

谢谢大家。

Answer 1

在您的解决方案中是否使用 class 或 id 并不重要，但从长远来看，总有一个合适的方法。重要的是您可以在每个方 block 上使用相同的样式名称。因此，它将是正方形，而不是正方形 1、2、3 等...我们将 class 用于在同一页面上多次重复的对象，将 id 用于发生一次的对象。

是我找到的快速引用:http://www.htmldog.com/guides/css/intermediate/classid/

这是我要开始使用的代码。

您需要使用 float，然后在新行上使用 clear:both。

<div id="outterWrapper">
 <div id="theGrid">
   <div class="square"></div><div class="square"></div><div class="square"></div>
     <div class="clear"></div>
   <div class="square"></div><div class="square"></div><div class="square"></div>
     <div class="clear"></div>
   <div class="square"></div><div class="square"></div><div class="square"></div>
  </div><!-- END  THE GRID -->
 </div><!-- END OUTTER WRAPPER -->

#theGrid{
    margin-left: auto;
    margin-right: auto;
    width: 600px;
    height:600px;
    background-image:url("img/grid.png");
    }

/*Here we use class to reference all the squares*/
.square {
    margin: 7px 0 0 7px; /* play with your positioning here. Can also use padding*/
    width:200px;
    height:200px;
    background-color:transparent;
    float:left; /*This will make all the boxes move next to each other*/
    }
.square:hover {
    background-color: yellow;
    opacity:0.2;
    filter: alpha(opacity=20);
    }
.clear {
    clear:both;
    }