替代HTML5块级锚点

Question

我搜索了很多关于块级锚点的替代方法。 HTML 5允许在块元素周围添加<a>标记，但是某些软件（例如，在GetSimple中使用）不支持：{/ p>

CKEditor

如果由于某种原因无法使用块级锚点并且应该避免使用JavaScript，那么如何使HTML块元素充当超链接呢？

Answer 1

只需使用块容器作为内容 - 然后在此内容上方放置一个绝对定位的<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> 元素以提供超链接。使用CSS将<a>显示为块并将其拉伸到父容器（Demo / JSFiddle：https://jsfiddle.net/dhfegLft/1/）。

HTML

<a>

CSS

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

很酷，因为：不需要宽度或高度定义。

<强>限制

1. 您可以在悬停时设置叠加块的样式（例如，边框，透明背景），但不能设置容器的内容，因为“真正的”块级锚点允许。
2. 容器/包装盒不得为.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; } 。
3. 基础框的内容无法选择或以其他方式用于用户交互（例如JavaScript）。