javascript - Nested text links in HTML -

in html nested links not permitted. however, purpose (text notes refer whole sentences , 1 single word within anotated sentences) need them. have find way solve problem.

however, have basic idea on how should , behave. following mock shows 2 links: 1 target a, 1 b. "outer" link is, lower line under it. outer link, thus, line lower of b. clicking on lines of link should lead target of link - if text above line text of inner link.

i've tried show intended behaviour hover colors: blue a, pink b.

any ideas how realize in html of css (and maybe svg?). i'd prefer solutions without scripting, suggestions welcomed.

use javascript best results

i know:

i'd prefer solutions without scripting,

but…

any suggestions welcomed.

you can add inline onclick handler child span:

<a href="#a">aaaa <span onclick="event.preventdefault(); window.location.assign('#b'); return false;">bbbb</span> aaaa</a> 

or, dry, pass in reference handler instead:

<a href="#a">aaaa <span onclick="embedlink('#b');">bbbb</span> aaaa</a> 

definition of handler:

function embedlink(url) {     event.preventdefault();     window.location.assign(url);     return false; } 

working example:

a {    display: inline-block;    text-decoration: none;    color: blue;    border-bottom: 1px solid blue;    padding: 1px;  }  .annotation {    color: fuchsia;    border-bottom: 1px double fuchsia;    background-color: white;  }  a:hover {    background-color: lightblue;  }  .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>

---

with js, can handle other possibilities well:

• open in new window. use: window.open() instead of window.location.assign().
• copy clipboard. add event listener context , copy events on parent link. in handler, use document.execcommand('copy') grab url clicked child span instead; perhaps url stored in data-href attribute.
• display url in status bar. add mouseover event listener. in handler, set window.status = url.