Turn an Entire DIV into a Clickable Link

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>

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 () {
    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
    function () {
      window.status = $(this).find('a:first').attr('href');
    function () {
      window.status = '';
Amit Agarwal

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


Awards & Titles

Digital Inspiration has won several awards since it's launch in 2004.

Google Developer Expert

Google Developer Expert

Google awarded us the Google Developer Expert award recogizing our work in Google Workspace.

ProductHunt Golden Kitty

ProductHunt Golden Kitty

Our Gmail tool won the Lifehack of the Year award at ProductHunt Golden Kitty Awards in 2017.

Microsoft MVP Alumni

Microsoft MVP Alumni

Microsoft awarded us the Most Valuable Professional (MVP) title for 5 years in a row.

Google Cloud Champion

Google Cloud Champion

Google awarded us the Champion Innovator title recognizing our technical skill and expertise.

Email Newsletter

Sign up for our email newsletter to stay up to date.

We will never send any spam emails. Promise.