how to format links so that they are 25% of the viewport in all for corners?

Question

I have successfully set up four divs so that they are 25% of the viewport, in each corner. Now I want to make them clickable links, so that I can apply background images that change upon hover.

Here's what I have:

html:

<div id="intro">
    <div class="box topleft">
        <a href="#1"><h4 class="blockhead">link1</h4></a>
    </div>
    <div class="box topright">
        <a href="#2"><h4 class="blockhead">link2</h4></a>
    </div>
    <div class="box bottomleft">
        <a href="#3"><h4 class="blockhead">link3</h4></a>
    </div>
    <div class="box bottomright">
        <a href="#4"><h4 class="blockhead">link4</h4></a>
    </div>
  </div>

css:

#intro {
    position: absolute;
    width: 100%;
    height: 100%;
}
.box {
    position: inherit;
    width: 50%;
    height: 50%;
}
.box a:active,
.box a:link {
    padding: 0;
    background: none;
    width: 100%;
    height: 100%;
}
.box h4.blockhead {
    position: absolute;
    color: #ffffff;
    padding: 5%;
}
.box.topleft h4.blockhead,
.box.topright h4.blockhead { bottom: 0 }
.box.topleft h4.blockhead,
.box.bottomleft h4.blockhead { right: 0 }
.box.topleft {
    background: #bad80a;
    top: 0;
    left: 0;
}
.box.topright {
    background: #0083d6;
    top: 0;
    right: 0;
}
.box.bottomleft {
    background: #003f87;
    bottom: 0;
    left: 0;
}
.box.bottomright {
    background: #ffc61e;
    bottom: 0;
    right: 0;
}

It's imperative that the text in the divs remain aligned as they are. ANY help in the right direction greatly appreciated.

And here it is on jsfiddle: http://jsfiddle.net/blackessej/j47Ye/3/

Answer 1

.box a:link {
    /* rest of code */
    display: block;
}

http://jsfiddle.net/j47Ye/1/