在超链接区域显示链接 [英] Displaying a link within a hyperlinked area

问题描述

基本上，在我们的一个页面中，我们有几个超链接区域。这些区域不仅可以通过设置与 display：block 的链接在整个背景中进行点击，而且还可以在整个背景中进行点击。您可以在此处查看这种可点击区域的简单示例。

$ b $最近，那些要求我在这个领域增加另一个链接的权力。内部链接对于可点击区域会有不同的目标，并且只能点击它的即时文本，其余的可点击区域将围绕它。您可以在此演示中看到如何融合在一起（黄色代表内部的可点击部分链接和红色代表外部链接）。
注意：我意识到这看起来是一个非常混乱的实现，但我担心它不在我的手中。

）我不能简单地嵌套我的< a> 标签，就像这样：

 < a href =＃class =clickable_area> 
< span> RED背景并可点击< / span>< br /> 
< span> RED背景并可点击< / span>< br /> 
< span> RED背景并可点击< / span>< br /> 
< a class =inner_linkhref =＃>黄色背景和它自己的链接< / a>< br /> 
< / a> 
  

尝试像这样嵌套标签会导致外部链接被第一个< / a> ，如此处。

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

我尝试了一些使用CSS的解决方法，但至今我已经干了。我有一种感觉，绝对定位或负利润率可能是关键，但我从来没有任何好处。

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

解决方案

您无法嵌套链接。我的建议是绝对将内部链接放置在外部区域之上，有点像这样：

 < div class =容器style =position：relative> 
< a href =...> 
< span> RED背景并可点击< / span>< br /> 
< span> RED背景并可点击< / span>< br /> 
< span> RED背景并可点击< / span>< br /> 
< / a> 
< a href =...style =position：absolute; top：... px; left：... px> link 2< / a> 
< / div> 
  

Have come against an interesting problem and I'm stumped.

Basically on one of our pages we have a couple of hyperlinked areas. These areas are not only clickable where they have text but throughout the entire background by setting the link with display:block. You can see a simple example of such a clickable area here.

So recently the powers that be have asked me to add another link within this area. The inner link would have a different target to clickable area and will only be clickable for it's immediate text and the rest of the clickable area will wrap around it. You can see how this would fit together in this demo (the yellow bit represents the clickable portion of the inner link and the red represents the outer link). NOTE: I realise this looks a very messy implementation but I'm afraid it's out of my hands.

By design (and for good reason) I cannot simply nest my <a> tags like so:

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

Trying to nest the tags like this causes the outer link to be closed prematurely by the first instance of </a> as seen here.

One solution may be to make the inner link a span element and then use onclick events to perform the hyperlink via JavaScript but I'm not too found of this approach and would really prefer to avoid any JavaScript workarounds.

I've tried a couple of workarounds with CSS etc. but as yet I've come up dry. I've a feeling that absolute positioning or negative margining could be key but I've never been any good at either.

If anyone could offer up any suggestions I'd be very appreciative.

解决方案

You can't nest links. My suggestion is to absolutely position the inner link over top of the outer area, somewhat like this:

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

这篇关于在超链接区域显示链接的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！