Подсветка сетки CSS

Question

Я играю с сайтом с изображением сетки размером 600 пикселей по 600 пикселей на 9 квадратов в своем собственном div. Я хотел бы выделить каждый квадрат сетки при наведении, и мне это удалось, но я хотел бы знать, может ли мой код быть более компактным.

например, мое поведение в поведении никогда не изменяется, но, как я его кодирую, мне нужно было бы скопировать 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); 

} 

Спасибо всем.

Answer 1

Это не имеет значения, погода вы используете класс или идентификатор или нет на ваше решение, но есть правильный путь в долгосрочной перспективе. Важно то, что вы можете использовать одно и то же имя стиля на каждом квадрате. Таким образом, он будет квадратным, а не квадратным, 2, 3 и т.д. ... Мы используем класс для объекта, который повторяется на той же странице несколько раз и id для объекта, который происходит один раз.

Является ли это краткий справочник, я нашел: http://www.htmldog.com/guides/css/intermediate/classid/

вот код, который я хотел бы начать использовать.

Вам нужно будет использовать float, а затем использовать clear: оба, когда вы находитесь в новой строке.

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

Answer 2

Вы можете использовать класс вместо ид

Ой, извините, я не понял, что вы хотите, вы можете просто сделать, как этот

#square1:hover, #square2:hover, #square3:hover....... 
{ 
    background: yellow; 
} 

Answer 3

Вместо использования # для обеих # Square1 & # square1: hover, вы можете использовать .square1 & .square1: hover.

Символ # используется для идентификаторов (то есть. <span id="square1"></span>)

. символ используется для классов (то есть <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>