Hovering over hyperlinks, highlighting large background area

How can I (when hovering) highlight a larger than default area of a hyperlink using using HTML and CSS? Something similar to the Google navigation links (Calendar, Documents, Rea开发者_如何学Goder, etc).

I can do this when a link is clicked by wrapping a HyperLink in a div and changing the div's background-color, but can't figure out how to do it on hover. Any examples of solutions similar to the google navigation?

To do that you need to display:block the "a" so you can give it a width and a height. For example :

a {
  display: block;
  width: 300px;
  height: 200px;
}

And then

 a:hover {
    background-color: #000;
 }

Change the background-color in the a:hover psuedoclass in the CSS.

This will apply to all tags though, so if you want it only for one, use an id.

a:hover
{
    background: blue;
}

If you mean something similar to this basic example: http://jsfiddle.net/z6B9X/
Where the background of the link is changed (the larger than default area), then just start with these basics and go from there.

The next step would be to add background images to the link, change the background on hover. Also add in borders, images to the left or right, etc...