HTML5 블록 수준 앵커의 대안

Question

블록 수준 앵커에 대한 대안을 많이 검색했습니다. 경우에, 당신은 하이퍼 링크와 같은 HTML 블록 요소의 행동을 어떻게

<a href="myLinkTarget"> 
    <div> 
    <h2>Great feature</h2> 
    <p>One new and exciting thing you can 
    do in HTML 5 is wrap links round “block-level” elements.</p> 
    </div> 
</a> 

을 : HTML 5는 지원하지 않습니다 (예를 들어, GetSimple에 사용) 블록 요소 주위에 <a> 태그하지만 CKEditor 같은 일부 소프트웨어를 수 어떤 이유로 블록 레벨 앵커를 사용할 수 없으며 JavaScript를 피해야합니다.

Answer 1

내용에 블록 컨테이너를 사용하고 하이퍼 링크를 제공하기 위해이 내용 위에 절대적으로 배치 된 <a> 요소를 배치하십시오. CSS를 사용하여 <a>을 블록으로 표시하고이를 부모 컨테이너로 확장합니다 (Demo/JSFiddle : https://jsfiddle.net/dhfegLft/1/).

HTML

<div class="box"> 
    <h2>Block content</h2> 
    <p>Even more content</p> 
    <!-- Think about screen readers, give the hyperlink some content --> 
    <a class="boxlink" href="http://stackoverflow.com/">Visit Stackoverflow</a> 
</div> 

CSS

.box { 
    position: relative; 
    padding: 1em; 
} 
.box a.boxlink { 
    position: absolute; 
    left: 0; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    color: transparent; 
    border: 2px solid #0000FF; 
} 
.box a.boxlink:hover { 
    border-color: #FF9900; 
} 

쿨, 때문에 : 없음 너비 또는 높이 정의가 필요하지 않습니다.

제한은

1. 당신은 "진짜"블록 레벨의 앵커로 가져가에 오버레이 블록 (예를 들어, 테두리, 투명한 배경)하지만, 용기없는 내용을, 스타일 수는 허용 것이다.
2. 컨테이너/상자는 position: static이 아니어야합니다.
3. 기본 상자의 내용을 선택하거나 사용자 상호 작용 (예 : 자바 스크립트)에 사용할 수 없습니다.