Alternative zu HTML5-Block-Level-Anker

Question

Ich suchte viel nach Alternativen für Block-Level-Anker. HTML 5 ermöglicht einen <a> Tag um ein Block-Element, aber einige Software wie CKEditor (verwendet in GetSimple, zum Beispiel) wird das nicht unterstützen:

<a href="myLinkTarget"> 
    <div> 
    <h2>Great feature</h2> 
    <p>One new and exciting thing you can 
    do in HTML 5 is wrap links round “block-level” elements.</p> 
    </div> 
</a> 

Wie Sie ein HTML-Block-Element wirken als Hyperlink zu machen, wenn Block-Level-Anker ist aus irgendeinem Grund nicht verfügbar und JavaScript sollte vermieden werden?

Answer 1

Verwenden Sie einfach einen Block Container für den Inhalt - und dann ein absolut positioniert <a> Element über diesen Inhalt, um den Hyperlink bereitzustellen. Verwenden Sie CSS, um die <a> als Block anzuzeigen und strecken Sie es zum elterlichen Container (Demo/JSFiddle: https://jsfiddle.net/dhfegLft/1/).

HTML

<div class="box"> 
    <h2>Block content</h2> 
    <p>Even more content</p> 
    <!-- Think about screen readers, give the hyperlink some content --> 
    <a class="boxlink" href="http://stackoverflow.com/">Visit Stackoverflow</a> 
</div> 

CSS

.box { 
    position: relative; 
    padding: 1em; 
} 
.box a.boxlink { 
    position: absolute; 
    left: 0; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    color: transparent; 
    border: 2px solid #0000FF; 
} 
.box a.boxlink:hover { 
    border-color: #FF9900; 
} 

Cool, weil: keine Breite oder Höhe Definition erforderlich ist.

Einschränkungen

1. Sie können die Overlay-Block auf schweben Stil (z.B. Grenze, transparenter Hintergrund), aber nicht den Inhalt des Behälters, wie „real“ auf Blockebene verankert wäre erlaubt.
2. Der Container/die Box darf nicht position: static sein.
3. Der Inhalt der zugrunde liegenden Box ist nicht auswählbar oder anderweitig für Benutzerinteraktionen (z. B. JavaScript) verfügbar.