1

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

例如，我的突出显示行为永远不会改变，但是我编码它的方式我需要为每个方块编码 9 个，我怎样才能只有一个并将它应用到所有网格方块？

这是代码。

#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);

 }

谢谢大家。

4

3 回答 3

1

无论您在解决方案中是否使用 class 或 id 都没有关系，但从长远来看，有一种适当的方法。重要的是您可以在每个方块上使用相同的样式名称。因此，它将是正方形而不是 square1、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;
    }
于 2013-04-27T04:04:33.340 回答
0

您可以使用class而不是id

哦，对不起，我误解了你想要的，你可以这样做

#square1:hover, #square2:hover, #square3:hover.......
{
    background: yellow;
}
于 2013-04-27T03:39:26.893 回答
0

您可以使用 .square1 和 .square1:hover，而不是同时使用 #square1 和 #square1:hover。

# 字符用于 ID（即。<span id="square1"></span>）

这 。字符用于类（ ie. <span class="square1"></span>）

然后将类“.square”应用于九个正方形中的每一个。任何具有 .square 类的正方形都将应用该样式。悬停也是如此。

否则，如果这对您不起作用……您可以在 javascript 中通过向每个方格添加 onmouseover 和 onmouseout 事件来实现。然后拥有处理从代码动态应用样式的javascript函数。

例如：

<div id="square1" onmouseover="handleMouseOver('square1')" onmouseout="handleMouseOut('square1')"></div> 

<script>
    function handleMouseOver(sq)
    {
        // set style
    }
    function handleMouseOut(sq)
    {
        // set style
    }
</script>
于 2013-04-27T03:48:04.940 回答