Альтернатива блочным уровням HTML5

Question

Я много искал альтернативы для блочных якорей. HTML 5 позволяет <a> тег вокруг элемента блока, но некоторое программное обеспечение, как CKEditor (используется в GetSimple, например) не будет поддерживать, что:

<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 блок элемента действуют как гиперссылки, если блокировщики уровня по какой-либо причине недоступны, и JavaScript следует избегать?

Answer 1

Просто используйте контейнер для контейнера для содержания, а затем разместите элементнад этим контентом, чтобы предоставить гиперссылку. Используйте 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. Содержимое базового блока не может быть выбрано или доступно для пользовательских взаимодействий (например, JavaScript).