Make a div into a link

Question

I have a

block with some fancy visual content that I don\'t want to change. I want to make it a clickable link.

I\'m looking for something l

相关标签:

Answer 1

An option that hasn't been mentioned is using flex. By applying flex: 1 to the a tag, it expands to fit the container.

div {
  height: 100px;
  width: 100px;
  display: flex;
  border: 1px solid;
}

a {
  flex: 1;
}

<div>
  <a href="http://google.co.uk">Link</a>
</div>

Answer 2

This option doesn’t require an empty.gif as in the most upvoted answer:

HTML:

 <div class="feature">
       <a href="http://www.example.com"></a>
 </div>

CSS:

 div.feature {
        position: relative;
    }

    div.feature a {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        text-decoration: none; /* No underlines on the link */
        z-index: 10; /* Places the link above everything else in the div */
        background-color: #FFF; /* Fix to make div clickable in IE */
        opacity: 0; /* Fix to make div clickable in IE */
        filter: alpha(opacity=1); /* Fix to make div clickable in IE */
    }

As proposed at http://www.digitalskydesign.com/how-to-make-an-entire-div-a-link-using-css/

Answer 3

This post is Old I know but I just had to fix the same issue because simply writing a normal link tag with the display set to block does not make the whole div clickable in IE. so to fix this issue far simpler than having to use JQuery.

Firstly let us understand why this happens: IE wont make an empty div clickable it only make the text/image within that div/a tag clickable.

Solution: Fill the div with a bakground image and hide it from the viewer.

How? You ask good questions, now listen up. add this backround style to the a tag

> "background:url('some_small_image_path')
> -2000px -2000px no-repeat;"

And there you have it the whole div is now clickable. This was the best way for me cause Im using it for my Photo Gallery to let the user clik on one half of the image to move left/right and then place a small image as well just for visual effects. so for me I used the left and right images as background images anyway!

Answer 4

This is the best way to do it as used on the BBC website and the Guardian:

I found the technique here: http://codepen.io/IschaGast/pen/Qjxpxo

heres the html

<div class="highlight block-link">
      <h2>I am an example header</h2>
      <p><a href="pageone" class="block-link__overlay-link">This entire box</a> links somewhere, thanks to faux block links. I am some example text with a <a href="pagetwo">custom link</a> that sits within the block</p>

</div>

heres the CSS

/**
 * Block Link
 *
 * A Faux block-level link. Used for when you need a block-level link with
 * clickable areas within it as directly nesting a tags breaks things.
 */


.block-link {
    position: relative;
}

.block-link a {
  position: relative;
  z-index: 1;
}

.block-link .block-link__overlay-link {
    position: static;
    &:before {
      bottom: 0;
      content: "";
      left: 0;
      overflow: hidden;
      position: absolute;
      right: 0;
      top: 0;
      white-space: nowrap;
      z-index: 0;
    }
    &:hover,
    &:focus {
      &:before {
        background: rgba(255,255,0, .2);
      }
    }
}

Answer 5

This is a "valid" solution to achieving what you want.

<style type="text/css">
.myspan {
    display: block;
}
</style>
<a href="#"><span class="myspan">text</span></a>

But most-likely what you really want is to have an <a> tag displayed as a block level element.

I would not advise using JavaScript to simulate a hyperlink as that defeats the purpose of markup validation, which is ultimately to promote accessibility (publishing well-formed documents following proper semantic rules minimizes the possibility the same document will be interpreted differently by different browsers).

It would be preferable to publish a web page that does not validate, but renders and functions properly on all browsers, including ones with JavaScript disabled. Furthermore, using onclick does not provide the semantic information for a screen reader to determine that the div is functioning as a link.

Answer 6

This worked for me:

HTML:

<div>

  WHATEVER YOU WANT

  <a href="YOUR LINK HERE">
    <span class="span-link"></span>
  </a>

</div>

CSS:

.span-link {
  position:absolute;
  width:100%;
  height:100%;
  top:0;
  left: 0;
  z-index: 9999;
}

This adds an invisible element (the span), which covers your entire div, and is above your whole div on the z-index, so when someone clicks on that div, the click is essentially intercepted by your invisible "span" layer, which is linked.

Note: If you're already using z-indexes for other elements, just make sure the value of this z-index is higher than anything you want it to rest "on top" of.