在超链接区域内显示链接答案

【问题标题】：Displaying a link within a hyperlinked area在超链接区域内显示链接
【发布时间】：2010-11-25 06:17:56
【问题描述】：

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

基本上，在我们的一个页面上，我们有几个超链接区域。通过使用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 等的变通方法，但到目前为止我已经干了。我觉得绝对定位或负边距可能是关键，但我从来都不擅长。

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

【问题讨论】：

这无济于事，但这样的嵌套锚点将是无效的标记，并且可能会导致进一步的问题。我怀疑它可以用 conventional 手段完成，但是 SO 是人类众神的家园。如果可能的话，我还建议重新设计实现（即使用可点击的div，它可以很容易地以这种方式支持多个链接）（但也要欣赏“权力”的固执）

标签： html css

【解决方案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>

【讨论】：

感谢狄奥迪斯。这当然是一个可能的解决方案好吧see here。我将把问题留待一段时间，看看是否有人能找到更好的答案，如果没有，我会接受。
好的，这看起来确实是最好的答案。我上一条评论中的演示在红色可点击区域元素上使用了padding-bottom，以便将区域拉伸到足以让内部链接移动到其中。实际上，只需在可点击区域中添加一个额外的<br/> 会更容易，因为这也可以获得完美的空间量。再次感谢 Diodeus

【解决方案2】：

你不能嵌套链接，但使用绝对定位。

<div id="wrapper">
  <a id="bigred" href="...">Big clickable area</a>
  <a id="yellow" href="...">Yellow background link</a>
</div>

CSS

#wrapper {
  position: relative;
  height: 300px;
  width: 500px;
}

#bigred {
  background: #ff0000;
  position: absolute;
  top: 0;
  left: 0;
  height: 300px;
  width: 500px;
}

#yellow {
  background: #ffff00
  position: absolute;
  top: 30px;
  left: 30px;
}

这两个链接都是可点击的。由于源顺序，黄色被绘制在红色之上。如果您更改顺序，您将需要使用z-index 来控制哪个显示在哪个之上。

【讨论】：

+1 用于工作解决方案。谢谢马丁。我认为 Diodeus 和 Michael 的解决方案可能更好一些，因为它们不需要“bigred”链接来使用绝对位置或设置宽度/高度。

【解决方案3】：

这是一个工作示例：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<body>
<style>
a {text-decoration:none; background-color:red}
.clickable_area{display:block;color:#000; padding-bottom: 20px;}
.container{position: relative;}
.inner_link{position:absolute; bottom: 0px; background-color:yellow}
</style>

    <div class="container">
        <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>
        <a class="inner_link" href="#">Yellow background and it's own link</a>
    </div>

</body>
</html>

【讨论】：

【解决方案4】：

我会使用 div 来包装您的链接。这就是你想要的吗？ http://jsfiddle.net/wcCMC/3/

【讨论】：

这将是正常情况，但 irishbuzz 发出以下提示：我意识到这看起来是一个非常混乱的实现，但我担心它不在我的掌控之中。按照设计（并且有充分的理由），我不能简单地嵌套我的标签
感谢您花时间回答。我除了迈克尔 cmets - 黄色可点击区域只能覆盖第二个链接的文本，而红色背景必须填写右侧剩余的空间。