How to make an entire div clickable with CSS [closed]


Tags: css,html,clickable

Problem :

Sometimes you want to make an entire div (or other element) into a clickable link. Here’s an example.

Here’s a cross-browser way to do it using pure CSS:

HTML:

<div class="clickable">
    <a href="URL_OF_LINK_TARGET"> </a>
    Rest of div content goes here
</div>
CSS:

div.clickable { /* Containing div must have a position value */
    position:relative;
}
div.clickable a {
    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=1); /*workaround to make clickable in IE */
}

First, give the containing div position. That way, when we apply “position:absolute;” to the link (see next paragraph) it will position itself relative to the containing div.

Next, make the link absolutely positioned and the full size and depth of the containing div. The link’s z-index makes sure it’s above everything else in the div, so no matter where you click, you’re clicking the link.

IE, naturally, has quirks. In this case, IE requires a background color for such a link to be clickable, so we give it a background color (white), set the opacity to 0, then give it an IE-only opacity of 1% using IE’s proprietary filter property.

Finally, put whatever content you want in the div. If you’re going to be layering the content using z-index, just make sure not to give any element a higher z-index than the link.



Solution :

You can wrap a div in a link and it is valid HTML5.

<a href="#">
      <div></div>
</a>

    CSS Howto..

    How to conditionally render CSS and JavaScript inside head element of an HTML

    How to add checkmarks and x's when validating in angularjs?

    How to add scroll to child of flex item?

    How to retrieve the real height of a #div (including overflowed parts)

    How to override bootstrap styles?

    How to vertically align absolutely positioned images on top of one another?

    how to place an image at the center of the browser irrespective of the resolution?

    How to change the color of html td element after postback in asp.net?

    How to increase height of footer's div when browser window is resized?

    How do I make images interactive?

    how to change css of n number of div element using jquery

    How can I apply CSS selector to attribute values being case sensitive?

    How to Create Grid/Tile View with CSS?

    css: column-count property - how to modify it with css to modify the number of items in each column?

    How to combine two css3 gradients ?

    How to do not apply CSS on a specific TAG

    How to create a firefox addon which injects CSS into a page? [closed]

    how to set border spacing in javafx

    How to bound CSS3 animation to class

    How to write Text in css like show in images?

    How Do I Add Colgroup Tag to ASP:Datagrid Control?

    How To select a specific Div from its Class with JS

    CSS image rollover map and jQuery : how to use a second li list?

    How do you add multile vendor prefixes to one css property?

    how to affect an element's width by one child element but not others using CSS

    JS/JQuery: How to switch class several times in a loop way?

    How to target iPhone 3GS AND iPhone 4 in one media query?

    How to achieve a lightbox effect with css only? Example available

    How do I integrate a jQuery script in to my html file?

    How do I calculate percentage based on pixels for CSS conversion?