HTML5ブロックレベルのアンカーの代わりに

Question

ブロックレベルのアンカーの代替案をたくさん検索しました。 HTML 5は、ブロック要素の周り<a>タグを許可しますが、（例えば、GetSimpleで使用される）CKEditorのようないくつかのソフトウェアは、それをサポートしていません。

<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

コンテンツ用のブロックコンテナを使用し、ハイパーリンクを提供するために絶対に配置された<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. 下位のボックスのコンテンツは、ユーザーのやりとり（JavaScriptなど）のために選択することも、他の方法で利用することもできません。