Is it possible to change the clickable area of links using CSS?

I have a code block looking something like this:

<p class="cont">
 <a href="otherpage.php" class开发者_Python百科="link"><img src="test.jpg" alt="" width="100" height="100"/></a>
</p>

and I've got some CSS like this:

.cont {
  width:200px;
  height:200px;
}
.cont:hover {
  background-color:#CCC;
}

My question is, if it's possible to change the size of the link area, so that it takes up the whole

area thus making it clickable - not only the image. I've tried giving width and height to the .link class and use display:block but it doesn't do the trick. Is it even possible?

See: http://jsfiddle.net/sSGJV/
Or with 200px dimensions: http://jsfiddle.net/sSGJV/1/

HTML:

<a href="http://www.google.com/">
    <img src="http://www.google.com/images/logos/ps_logo2.png" />
    <br />
    Click to go to the Googles.
</a>

CSS:

a {
    display: block;
    border: 3px dashed #000;
    text-align: center
}

As you can see, you can click anywhere inside the <a> tag.

In short yes, there is a great blog post about just this subject that can be found here: http://csswizardry.com/2011/01/maximising-hit-area-for-usability/

I had what seemed like a similar issue and resolved it by adding style z-index:3 to the wrapping div.