替代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

只需使用塊容器的內容 - 然後將絕對定位的<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）。