CSS 그리드

Question

나는 자신의 사업부에서 9 개 사각형의 600PX 그리드에 의해 600PX의 이미지를이 사이트와 장난하고 하이라이팅. 마우스를 올리면 각 눈금 사각형을 강조 표시 할 수 있기를 바래서 성공했지만 코드가 더 작아 질 수 있는지 알고 싶습니다. 내 하이라이트 동작은 변경되지 않습니다,하지만 난 그것을 코딩하고있는 방법은 내가 어떻게 하나가 모든 그리드 사각형에 적용 할 수 있습니다, 각 평방 그들을 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

이 문제는 솔루션에 클래스 나 ID 또는하지를 사용하지만 장기적으로 적절한 방법이 날씨하지 않습니다. 중요한 점은 각 사각형에서 같은 스타일 이름을 사용할 수 있다는 것입니다. 그래서 사각형이 아닌 square1, 2, 3, ect가 될 것입니다. 우리는 동일한 페이지에서 여러 번 반복되는 객체에 대해 클래스를 사용하고 한 번 발생하는 객체의 ID를 사용합니다. 여기

http://www.htmldog.com/guides/css/intermediate/classid/ 내가 사용하기 시작 것 코드 :

가 내가 발견하는 방법을 간략히 설명하고 있습니다.

float를 사용한 다음 새 행을 사용할 때 모두를 사용해야합니다.

<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

당신은 클래스 대신 ID

오의 사용할 수 있습니다, 당신이, 당신은 단지 대신 모두 #의 square1 &에 대한 #을 사용하여이

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

Answer 3

처럼 할 수 원하는 오해 죄송합니다 #의 square1는 : 호버 : 당신이 .square1 & .square1을 사용할 수, 가져가.

# 문자가 ID가 사용됩니다

(예. <span id="square1"></span>)

. 문자 클래스에 사용됩니다 (예. <span class="square1"></span>를)

그런 다음 아홉 개 사각형의 각 클래스 ".square"을 적용한다. .square 클래스가있는 모든 사각형에는 해당 스타일이 적용됩니다. 호버 (hover)도 마찬가지입니다. 그런 당신을 위해 작동하지 않는 경우

그렇지 않으면 ... 당신이 추가 된 onMouseover와에 의해 각각의 제곱에 이벤트 onmouseout 자바 스크립트에서 할 수 있습니다. 그런 다음 코드에서 동적으로 스타일을 적용하는 자바 스크립트 함수를 사용해야합니다. 예를 들어

:

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

<script> 
    function handleMouseOver(sq) 
    { 
     // set style 
    } 
    function handleMouseOut(sq) 
    { 
     // set style 
    } 
</script>