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等有关的解决方法但是到目前为止我已经干了。我有一种感觉，绝对定位或负裕度可能是关键，但我从来都不擅长。

如果有人能提出任何建议，我会非常感激。

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>

Answer 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来控制最重要的显示。

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

Answer 4

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

显示超链接区域内的链接

4 个答案: