Grow your CSS skills. Land your dream job.

Creating Clickable DIVs

Published by Chris Coyier

DIV's are a must in all CSS-based web design. They give you all kinds of fantastic positioning ability and give structure to your HTML. You can put links inside of a DIV, of course, but sometimes you just want the whole DIV to be clickable as a link. No problem, here is how it's done:

<div onclick="location.href='YOUR-URL-HERE';" style="cursor: pointer;"></div>

The cursor style parameter changes the cursor into the default pointer cursor when a vistor mouses over the DIV, which is a nice visual indication of it's clickability.

Update May 12, 2011

Inline JavaScript is way less cool than it was in 2007 (if it ever was). It's far more semantic and accessible to attach functionality via event handlers we apply in separate JavaScript. If we use jQuery, we could do something like:

<div>
   <h3>A bunch of</h3>
   <a href="http://google.com">stuff in here</a>
</div>
$(document).delegate("div", "click", function() {
   window.location = $(this).find("a").attr("href");
});

Comments

  1. sunil
    Permalink to comment#

    Dude.
    This works, but you should really be abstracting your js out of your html.

  2. You could probably give the div a ‘class’ of ‘link’ and a ‘rel’ equal to the url you wish to navigate to, and then use jQuery to setup the click event using the rel attribute.

    Go to Google…

    /* css */
    div.link {
    cursor: pointer;
    text-decoration: underline;
    }

    // javascript (using jQuery)
    $(“div.link”).click(function(){
    document.location.href = $(this).attr(“rel”);
    });

    Although this would not display the url in the status bar, as anchor links do.

    –Liam Goodacre

  3. Oh, thats weid, my html didn’t come out…

    You could probably give the div a ‘class’ of ‘link’ and a ‘rel’ equal to the url you wish to navigate to, and then use jQuery to setup the click event using the rel attribute.

    <div class=”link” rel=”http://www.google.com/”>Go to Google…</div>

    /* css */
    div.link {
    cursor: pointer;
    text-decoration: underline;
    }

    // javascript (using jQuery)
    $(”div.link”).click(function(){
    document.location.href = $(this).attr(”rel”);
    });

    Although this would not display the url in the status bar, as anchor links do.

    Thats better :D
    –Liam Goodacre

  4. Darren Smith
    Permalink to comment#

    I think its important to say you should also put in a non-javascript way navigating to the desired target for reasons of accessibility – both for non-javascript users and for those using text-only browsers for instance. This can be done by using a href tag inside your div either enclosing text or an image.

    Some text

    print(“code sample”);

Leave a Comment

Current day month ye@r *

*May or may not contain any actual "CSS" or "Tricks".