HTML中的嵌套文本链接

Question

在HTML中，不允许嵌套链接。 然而，为了我的目的（文本注释有时指的是整个句子，有时只是在已经分配的句子中只有一个单词）我需要它们。 所以我必须找到解决这个问题的方法。

但是，我现在所拥有的只是它应该如何看待和表现的基本概念。 下面的模拟显示了两个链接：一个到目标A，一个到B.“外部”是一个链接，下面是它下面的行。 A是外部链接，因此，它的行低于B的行。单击链接的行应始终指向该链接的目标 - 即使该行上方的文本是内部链接的文本。

我试图用悬停颜色显示预期的行为：蓝色代表A，粉红色代表B代表。

任何想法如何在CSS的帮助下（也许是SVG？）在HTML中实现这一点。 我更喜欢没有脚本的解决方案，但欢迎任何建议。

Answer 1

您可以在<span>的内部链接中使用：

 a {color: #00f; border-bottom: 1px solid; text-decoration: none;} a span {color: #66f; text-decoration: underline;} 

 <a href="#">Hello, this is link. This is <span>inner link</span> here.</a> 

一个小问题或额外的工作是，你需要JavaScript来让他们按照链接。

但正如您所问，您可以在没有任何脚本的情况下获得UI效果，但以下链接，肯定需要编写脚本！

Answer 2

扩展@connexo的答案，你可以将它们全部包装在一个范围内并在其上使用border-bottom。

 .split-link { border-bottom:1px solid blue; padding-bottom:1px; /* for visual reference only */ } .split-link a { text-decoration: none; } .split-link a.inner-link { text-decoration: underline; text-decoration: red; color:red; } 

 <span class="split-link"> <a href="#outer">Hello, this is a link. It has an </a> <a href="#inner" class="inner-link">inner link</a> <a href="#outer"> here.</a> </span> 

Answer 3

您将希望保持有效的HTML，因此您唯一的机会（除了JS）将外部链接分成两个链接。

<a href="#outer">Hello, this is link. This is </a><a href="#inner" class="inner-link">inner link</a><a href="#inner"> here.</a>

.inner-link { color: #66f; text-decoration: underline; }

这会将您示例中的蓝线分成两部分，我假设您不想这样做。 但这是不可能的。

Answer 4

使用JavaScript获得最佳效果

我知道：

我更喜欢没有脚本的解决方案，

但…

欢迎任何建议 。

您可以向子span添加内联onclick处理程序：

<a href="#A">AAAA <span onclick="event.preventDefault(); window.location.assign('#B'); return false;">BBBB</span> AAAA</a>

或者，要成为DRY，请传入对处理程序的引用：

<a href="#A">AAAA <span onclick="embedLink('#B');">BBBB</span> AAAA</a>

处理程序的定义：

function embedLink(url) {
    event.preventDefault();
    window.location.assign(url);
    return false;
}

工作范例：

 a { display: inline-block; text-decoration: none; color: blue; border-bottom: 1px solid blue; padding: 1px; } a .annotation { color: fuchsia; border-bottom: 1px double fuchsia; background-color: white; } a:hover { background-color: lightblue; } a .annotation:hover { background-color: lightpink; } 

 <a href="#A">AAAA <span data-href="#B" class="annotation" onclick="event.preventDefault(); window.location.assign(this.getAttribute('data-href')); return false;">BBBB</span> AAAA</a> 

---

使用JS，您还可以处理其他可能性：

• 在新窗口中打开 。 使用： window.open()而不是window.location.assign() 。
• 复制到剪贴板 。 向context添加事件侦听器并在父链接上copy事件。 在处理程序中，使用document.execCommand('copy')从被点击的子跨度中获取URL; 也许它的URL存储在data-href属性中。
• 在状态栏中显示URL 。 添加mouseover事件侦听器。 在处理程序中，设置window.status = url 。

Answer 5

谢谢大家的回答！ 他们都激励着我！

经过一番艰苦的思考并将你的答案合并在一起后，我得出了以下解决方案，其最大优点是所有链接的基本功能都可以在没有JavaScript的情况下工作。

我的主要想法是将所有链接包装在<span>元素中，并且正如connexo所建议的那样，将这些链接拆分为包含链接的链接。 因此，上面示例的HTML框架如下所示：

<span>
 <a>AAA</a>
 <span><a>BBB</a></span>
 <a>AAA</a>
</span>

所有JavaScript都与<span>相关联。 在Onmouseover上，它从所有祖先<span>删除了悬停类。 Onclick，它需要第一个链接子的url并重定向到那里。

CSS非常简单。 它从链接中删除下划线并定义跨度应该如何（并且在悬停的情况下表现）。

此设计的另一个优点是还支持嵌套的嵌套链接，您可以在下面的代码段中看到。

 function link_span_click(current_element,current_event) { current_event.preventDefault(); current_event.stopPropagation(); var target_href = current_element.getElementsByTagName('a')[0].href; window.location.assign(target_href); } function link_span_mouse_over(current_element) { while (current_element) { current_element.parentNode.classList.remove('link_span_hover'); current_element = current_element.parentNode; } var target_href = current_element.getElementsByTagName('a')[0].href; window.status = target_href; } function link_span_mouse_out(current_element) { while (current_element) { current_element.parentNode.classList.add('link_span_hover'); current_element = current_element.parentNode; } window.status = ''; } 

 a.nested_link { text-decoration: none; } span.link_span { cursor: pointer; display: inline-block; padding-bottom: 3px; background-color: white; border-bottom: 1px solid blue; } span.link_span_hover:hover { background-color: lightblue; } 

 <div> <span class="link_span link_span_hover" onclick="link_span_click(this, event)" onmouseout="link_span_mouse_out(this)" onmouseover="link_span_mouse_over(this)" > <a href="#a" class="nested_link">AAA</a> <span class="link_span link_span_hover" onclick="link_span_click(this, event)" onmouseout="link_span_mouse_out(this)" onmouseover="link_span_mouse_over(this)"> <a href="#b" class="nested_link">BBB</a> </span> <a href="#a" class="nested_link">AAA</a> </span> </div> <div> <span class="link_span link_span_hover" onclick="link_span_click(this,event)" onmouseout="link_span_mouse_out (this)" onmouseover="link_span_mouse_over (this)"> <a href="#a" class="nested_link">AAA AAA AAA AAA</a> <span class="link_span link_span_hover" onclick="link_span_click(this, event)" onmouseout="link_span_mouse_out(this)" onmouseover="link_span_mouse_over(this)"> <a href="#b" class="nested_link">BBB BBB</a> <span class="link_span link_span_hover" onclick="link_span_click(this, event)" onmouseout="link_span_mouse_out(this)" onmouseover="link_span_mouse_over(this)"> <a href="#c" class="nested_link">CCC</a> </span> <a href="#b" class="nested_link">BBB BBB</a> </span> <a href="#a" class="nested_link">AAA AAA AAA AAA</a> </span> </div> 

仍然存在一个问题：如果一个相当长的文本链接被分成线，只有第二个（或最后一个是精确的）线被加下划线。