Make a link to cover an entire div

If you want a link to cover an entire div, an idea would be to create an empty <a> tag as the first child:

<div class="covered-div">
  <a class="cover-link" href="/my-link"></a>
  <!-- other content as usual -->
div.covered-div {
  position: relative;

a.cover-link {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;

This works especially great when using <ul> to create block sections or slideshows and you want the whole slide to be a link (instead of simply the text on the slide). In the case of an <li> it’s not valid to wrap it with an <a> so you’d have to put the cover link inside the item and use CSS to expand it over the entire <li> block.


No comments yet.

Leave a Reply