在超链接的区域内显示链接

基本上在我们的一个页面上我们有几个超链接区域。这些区域不仅可以在有文字的地方点击，而且可以在整个背景中设置与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等解决方法，但至今我已经干了。我有一种感觉，绝对定位或负利润率可能是关键，但我从来都不擅长。

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

来源

2010-11-24 irishbuzz

这不会帮助，但这样的嵌套锚将是无效的标记，并可能进一步导致问题的路线。我怀疑它可以用传统的手段来完成，但是这是人类中众神的家园。如果可能的话，我还建议重新实施实施（即使用可轻松支持多个链接的可点击的“div”）（但也欣赏“权力”的固执） – Ross 2010-11-24 22:08:01

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

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

来源

2010-11-24 22:06:18

感谢Diodeus。这当然是一个可能的解决方案[看这里]（http://jsfiddle.net/JLpsG/）。我打算把问题留待另外一段时间，看看是否有人可以找到更好的答案，但如果不是，我会接受。 – irishbuzz 2010-11-24 22:34:51

好吧，这当然看起来像是最好的答案。我上次评论中的演示在红色可点击区域元素上使用了“padding-bottom”，以便将内部链接移动到足够的区域。在可点击的区域添加额外的`
`实际上更容易，因为这也可以实现完美的空间量。再次感谢Diodeus – irishbuzz 2010-11-25 10:45:41

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

来源

2010-11-24 22:12:22 stevelove

这将是一个正常的情况，但irishbuzz sed以下注：我意识到这看起来是一个非常凌乱的实施，但我恐怕它已经不在我的手中。由设计（并有很好的理由）我不能简单地嵌套我的标签 – Michael 2010-11-24 22:24:00

感谢您花时间回答。除了Michael的评论之外 - 黄色可点击区域只能覆盖第二个链接的文本，而红色背景必须填写剩余的空间到右侧。 – irishbuzz 2010-11-24 22:30:01

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

<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来控制在其上显示的显示。

来源

2010-11-24 22:15:06

在这里，您去工作的例子：

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

来源

2010-11-24 22:17:56 Michael

在超链接的区域内显示链接

回答

相关问题