html - 在超链接区域内显示链接

Question

遇到了一个有趣的问题，我被难住了。

基本上，在我们的一个页面上，我们有几个超链接区域。通过设置 display:block 链接，这些区域不仅可以在有文本的地方点击，而且可以在整个背景中点击。 .你可以看到这样一个可点击区域的简单例子here .

所以最近，当权者要求我在此区域内添加另一个链接。内部链接将具有与可点击区域不同的目标，并且仅可点击它的直接文本，其余可点击区域将环绕它。您可以在 demo 中看到这将如何组合在一起(黄色位代表内部链接的可点击部分，红色代表外部链接)。注意:我意识到这看起来是一个非常困惑的实现，但恐怕我无法控制。

根据设计(并且有充分的理由)我不能简单地嵌套我的 <a>像这样的标签:

<a href="#" class="clickable_area">
  <span>RED Background and clickable</span><br/>
  <span>RED Background and clickable</span><br/>
  <span>RED Background and clickable</span><br/>
  <a class="inner_link" href="#">Yellow background and it's own link</a><br/>
</a>

尝试像这样嵌套标签会导致外部链接被 </a> 的第一个实例过早关闭如所见here .

一个解决方案可能是使内部链接成为一个 span 元素，然后使用 onclick 事件通过 JavaScript 执行超链接，但我不太喜欢这种方法，并且真的更愿意避免任何 JavaScript 解决方法。

我已经尝试了一些使用 CSS 等的变通方法，但到目前为止我都没有成功。我觉得绝对定位或负 margin 可能是关键，但我从来都不擅长这两者。

如果有人能提出任何建议，我将不胜感激。

Answer 1

您不能嵌套链接。我的建议是将内部链接绝对定位在外部区域之上，有点像这样:

<div class="container" style="position:relative">
<a href="...">
<span>RED Background and clickable</span><br/>
<span>RED Background and clickable</span><br/>
<span>RED Background and clickable</span><br/>
</a>
<a href="..." style="position:absolute;top:...px;left:...px">link 2</a>
</div>