HTML 5 standards do not allow nesting of hyperlinks, although there are some valid use cases to allow this. So we need to rely on a work-around like this one for now:
HTML
<div class="block"> <a class="overlay" href="#overlay-link"></a> <div class="inner"> This entire box is a hyperlink. (Kind of)<br><br><br><br> <a href="#inner-link">I'm a W3C compliant hyperlink inside that box</a> </div> </div>
CSS
.block { position:relative; } .block .overlay { position:absolute; left:0; top:0; bottom:0; right:0; } .block .inner { position:relative; pointer-events: none; z-index: 1; } .block .inner a { pointer-events: all; }