Turn an Entire DIV into a Clickable Link

February 10, 2017

If you have been to a Pinterest like site that uses the grid masonry style layout, you may have noticed that one can hover over any region inside the box and its clickable.

A typical DIV is written using the following markup

<div class="box">
  <h2>Box Title</h2>
  <p>The Quick Brown Fox Jumped Over The Lazy Dog</p>
  <p><a class="divLink" href="https://www.labnol.org/">Webpage URL</a></p>
</div>

There’s a outer DIV and it has elements like the title, description and a link. The requirement is that when someone hovers their mouse over the DIV, it should point to the hyperlink that’s contained inside the DIV.

This can be done in two ways - using CSS or using jQuery.

The CSS approach - Make the Whole DIV clickable

<style type="text/css">
div.box {
   position: relative;
   width: 200px;
   height: 200px;
   background: #eee;
   color: #000;
   padding: 20px;
}

div.box:hover {
   cursor: hand;
   cursor: pointer;
   opacity: .9;
}

a.divLink {
   position: absolute;
   width: 100%;
   height: 100%;
   top: 0;
   left: 0;
   text-decoration: none;
   /* Makes sure the link doesn't get underlined */
   z-index: 10;
   /* raises anchor tag above everything else in div */
   background-color: white;
   /*workaround to make clickable in IE */
   opacity: 0;
   /*workaround to make clickable in IE */
   filter: alpha(opacity=0);
   /*workaround to make clickable in IE */
}

Here we assign an absolute position to the inner <a> tag such that it occupies the entire DIV and we also set the z-index property to 10 to position the link above all the other elements in the DIV. This is the easiest approach and the semantic structure is maintained.

$(document).ready(function () {
  // Open in new window
  $('.box1').click(function () {
    window.open($(this).find('a:first').attr('href'));
    return false;
  });

  // Or use this to Open link in same window (similar to target=_blank)
  $('.box1').click(function () {
    window.location = $(this).find('a:first').attr('href');
    return false;
  });

  // Show URL on Mouse Hover
  $('.box1').hover(
    function () {
      window.status = $(this).find('a:first').attr('href');
    },
    function () {
      window.status = '';
    }
  );
});

CSS Javascript

ShareWhatsAppTwitterFacebook

Amit Agarwal

Google Developer Expert, Google Cloud Champion

Amit Agarwal is a Google Developer Expert in Google Workspace and Google Apps Script. He holds an engineering degree in Computer Science (I.I.T.) and is the first professional blogger in India.

Amit has developed several popular Google add-ons including Mail Merge for Gmail and Document Studio. Read more on Lifehacker and YourStory