클래스 div에 링크 만들기?

Question

비교적 쉬운 질문이 있습니다 (또는 그렇게 생각합니다).하지만 저는 코딩 초보자입니다.

나는 내 페이지에 육각형 격자가 있으며 각각 다른 이미지와 링크를 넣어야합니다. 내 링크를 배치 할 위치를 파악할 수 없다는 문제가 있습니다.

처음에는 자리 표시 자로 만든 "빨간색"클래스를 조작하여 CSS를 통해 이미지를 배치 할 수있었습니다 (첫 번째 HTML 줄, 내 이미지를 지정한 "red1"클래스 있음).

링크를 배치하는 것에 대해 나는 분실했다. 중요한 정보를 빠뜨리면 어떤 도움이라도 대단히 감사하겠습니다. 너희들이 무슨 뜻인지 얻을 수 있도록

여기 내 코드입니다 :

HTML: <section class="hex clearfix"> 
     <div class="hex-grid-top"> 
      <div class="hexagon hexagon-scale"><div class="hexagon-in1"><div class="hexagon-in2 red1"></div></div></div> 
      <div class="hexagon hexagon-scale"><div class="hexagon-in1"><div class="hexagon-in2 red"></div></div></div> 
      <div class="hexagon hexagon-scale"><div class="hexagon-in1"><div class="hexagon-in2 red"></div></div></div> 
      <div class="hexagon hexagon-scale"><div class="hexagon-in1"><div class="hexagon-in2 red"></div></div></div> 
     </div> 
     <div class="hex-grid-mid"> 
      <div class="hexagon hexagon-scale"><div class="hexagon-in1"><div class="hexagon-in2 red"></div></div></div> 
      <div class="hexagon hexagon-scale"><div class="hexagon-in1"><div class="hexagon-in2 red"></div></div></div> 
      <div class="hexagon hexagon-scale"><div class="hexagon-in1"><div class="hexagon-in2 red"></div></div></div> 
      <div class="hexagon hexagon-scale"><div class="hexagon-in1"><div class="hexagon-in2 red"></div></div></div> 
      <div class="hexagon hexagon-scale"><div class="hexagon-in1"><div class="hexagon-in2 red"></div></div></div> 
     </div> 
     <div class="hex-grid-bot"> 
      <div class="hexagon hexagon-scale"><div class="hexagon-in1"><div class="hexagon-in2 red"></div></div></div> 
      <div class="hexagon hexagon-scale"><div class="hexagon-in1"><div class="hexagon-in2 red"></div></div></div> 
      <div class="hexagon hexagon-scale"><div class="hexagon-in1"><div class="hexagon-in2 red"></div></div></div> 
      <div class="hexagon hexagon-scale"><div class="hexagon-in1"><div class="hexagon-in2 red"></div></div></div> 
     </div> 
    </section> 

관련 CSS : 나는, 내가이 링크를 추가하는 방법을 알고 싶습니다 말했다 그래서

 .hexagon { 
    overflow: hidden; 
    visibility: hidden; 
    -webkit-transform: rotate(120deg); 
     -moz-transform: rotate(120deg); 
     -o-transform: rotate(120deg); 
     transform: rotate(120deg); 
    cursor: pointer; 
} 

.hexagon-in1 { 
overflow: hidden; 
width: 100%; 
height: 100%; 
-webkit-transform: rotate(-60deg); 
    -moz-transform: rotate(-60deg); 
    -o-transform: rotate(-60deg); 
     transform: rotate(-60deg); 
} 

.hexagon-in2 { 
    width: 100%; 
    height: 100%; 
    visibility: visible; 
    -webkit-transform: rotate(-60deg); 
     -moz-transform: rotate(-60deg); 
     -o-transform: rotate(-60deg); 
      transform: rotate(-60deg); 
} 

.hexagon-in2:hover { 
} 


.hexagon-scale { 
    width: 100px; 
    height: 200px; 
} 

.red { 
    background: red; 
} 

.red1 { 
    background-image: url(../Images/thumbs/001-thumb.gif); 
     width: 50; 
    height: 50; 

} 





.hex { 
    margin: 20px auto 0 auto; 
    width: 600px; 
    height: auto; 
} 

.hex-grid-top { 
    display: inline-block; 
    margin: 0 55px -105px 55px; 
} 

.hex-grid-mid { 
    display: inline-block; 
    margin: 0 auto -105px auto; 
} 

.hex-grid-bot { 
    display: inline-block; 
    margin: 0 55px; 
} 

.hex-grid-top .hexagon { 
    float: left; 
    margin: 0px 10px; 
} 

.hex-grid-mid .hexagon { 
    float: left; 
    margin: 0px 10px; 

} 

.hex-grid-bot .hexagon { 
    float: left; 
    margin: 0px 10px; 
} 

육각형! 그리고 내가 할 수있는 유일한 방법은 이미지를 다르게 첨부하는 것입니다. 사전에

감사합니다,

토마스

편집 : 감사 VLS, 즉 완벽하게 작동합니다! 나는 그것이 왜 효과가 있는지 모르지만 두렵다.

Answer 1

후, 내면의 육각 DIV 내부 링크를 넣어 같은 스타일을 시도해보십시오

데모

.hexagon-in2 a { 
    width: 100px; 
    height: 120px; 
    top: 40px; 
    display: block; 
    position: absolute; 
} 

: http://jsfiddle.net/verashn/z9Ver/ (I 밖으로 cursor: pointer 명확성을 위해 주석)

Answer 2

link tag 같은 당신의 div들 wraping 시도 그래서 :

<a href="your/link/address"><div class="hexagon hexagon-scale"></a> 

div를 클릭 할 때마다 링크도 표시됩니다.