링크 (CSS 전용)

여기에 큰 클릭 가능한 영역의 내부 링크를 만드는 방법에 대한 좋은 기사입니다 :링크 (CSS 전용)

http://css-tricks.com/links-inside-of-larger-clickable-areas/

이 솔루션은 자바 스크립트가 필요합니다. 기사 끝 부분에는 CSS 전용 솔루션에 대한 링크가 끊어져 있으므로 (분명히 할 수 있습니다) CSS를 사용하여이 작업을 수행하는 방법을 알 수는 없습니다. 어떤 아이디어?

Links inside larger clickable area

2012-07-10 David Jones

그래서 붉은 각 영역은 클릭 가능? 큰 녹지대가 그렇듯이? –

네, 맞습니다. 물론 큰 녹색 영역을 두 개의 반쪽으로 분할하여 분리되어 있지만 시각적으로 함께 흐를 수는 있지만 녹색 영역에 마우스를 올리면 JavaScript가 없어도 운이 좋을 것입니다. –

@ 대니얼 패러데이 - 슬라이싱이 올바른 해결책이라고 생각합니다. 간격을 두지 않고 인접한 클릭 가능 영역을 가지면 혼란 스러울 수 있습니다. 당신이 언급 스타일링 문제는 주위에있어, 아래 내 대답을 참조 – Gareth

나에게 너무 어려워 보이지는 않습니다. (JSFiddle).

HTML :

<header> 
    <a href="#1">Clickable</a> 
    <nav> 
     <ul> 
      <li> 
       <a href="#2">Clickable</a> 
      </li> 
      <li> 
       <a href="#3">Clickable</a> 
      </li> 
      <li> 
       <a href="#4">Clickable</a> 
      </li> 
      <li> 
       <a href="#5">Clickable</a> 
      </li> 
     </ul> 
    </nav> 
</header>

CSS :

a { color: #f4ebd4; font-family: sans-serif; text-decoration: none; text-transform: uppercase; font-size: 0.8em; } 

header { text-align: center; } 

header > a { display: block; line-height: 100px; } 

header > a, header > a + nav { background: #4b885c; } 
a:hover, a:hover + nav { background: blue; } 

nav ul { display: table; width: 100%; } 
nav li { display: table-cell; } 
nav a { display: block; background: #a51d2c; padding: 10px 20px; margin: 10px; }

출처

2012-07-10 16:55:22 Gareth

와우, 마크 업은 유효합니다! 열쇠는 '바깥 쪽'링크에 'line-height : 100 %'를 설정하는 것입니다. 아주 멋지다. –

잘 아니요, 부모 블록에 한 줄의 텍스트를 가운데에 배치하는 간단한 방법 일뿐입니다 (예를 들어 2 줄의 텍스트에서는 작동하지 않습니다). 그것이 당신이 걱정하는 것이면 그것은 중요한 링크 인'display : block'입니다. - 그 후에 당신은 당신이 원하는 크기로 링크로 원하는 것을 할 수 있습니다. – Gareth

아, 알겠습니다. 감사. –

조금 지저분한 수 있습니다, 내가 빨리 직장에서 마지막 5 분에 함께 넣어이 http://jsfiddle.net/5MkVW/을 시도하지만 갈 수 있습니다.

출처

2012-07-10 16:32:12

흥미 롭 군. 중첩 된 ''태그가 작동한다는 것을 알지 못했습니다. (구문은 물론 불법이지만 작동하는 것처럼 보입니다.) JSFiddle을 조금 정리했습니다. http://jsfiddle.net/7bP2T/ –

실제 링크로 업데이트 : http://jsfiddle.net/XdtN2/. IE9에서 작동하는 것으로 테스트되었습니다 (잘못된 HTML에도 불구하고). –

링크 (CSS 전용)

답변

관련 문제