One of the coolest effects for hyperlinks is to have an entire paragraph or block change background color on mouseover. Whatever is inside the block area remains the same, though. Just the background color changes. Here’s a look at how it looks while using some thumbnails that would represent the topic of each link at the same time. The thumbnails, however, do not have any hover effect themselves.

Demo

This is a quick view of how the block hover would work and look like

• Link Title One
  Place some text here describing the hyperlink contents as a summary…
  Date posted or author name
• Link Title Two
  Place some text here describing the hyperlink contents as a summary…
  Date posted or author name
• Link Title Three
  Place some text here describing the hyperlink contents as a summary…
  Date posted or author name

The HTML is pretty straight forward and the heights and widths can be adjusted to whatever you’d like them to be. My example shows the thumbnails at 80 x 87 in order to match the height of the block they represent. There’s no set height for the blocks themselves so you’ll need to judge your thumbnails based upon the amount of text you place into your blocks.

The trick with this is the ‘link’ is the entire block or li tag. Therefore, when you mouse over it, the hover effect covers the entire block

Here’s the HTML:

		
		
		


Link Title One
				Place some text here describing the hyperlink contents as a summary...
				Date posted or author name
Link Title Two
				Place some text here describing the hyperlink contents as a summary...
				Date posted or author name
Link Title Three
				Place some text here describing the hyperlink contents as a summary...
				Date posted or author name

Here’s the CSS from the example:

#links ul {
        list-style-type: none;
        width: 400px;
		float: left;
		margin: 0px;
		padding: 0px;
} 

#links li {
        border: 1px dotted #999;
        border-width: 1px 0;
        margin: 5px 0;
}

#links li a {
        color: #990000;
        display: block;
        font: bold 120% Arial, Helvetica, sans-serif;
        padding: 5px;
        text-decoration: none;
}

 * html #links li a {  /* make hover effect work in IE */
	width: 400px;
	float: left;
}

#links li a:hover {
        background: #FCD5AD
}

#links a em {
        color: #333;
        display: block;
        font: normal 85% Verdana, Helvetica, sans-serif;
        line-height: 125%;
}

#links a span {
        color: #125F15;
        font: normal 70% Verdana, Helvetica, sans-serif;
        line-height: 150%;
}

#linkwrapper {
width: 550px;
border: 0;
}

#linkpics {
width: 80px;
float: left;
padding: 5px;
margin-right: 10px;
}

.linksimage {
float: left;
width: 80px;
margin-bottom: 5px;
border: 1px #CC3300 solid;
padding: 3px;
background: #FF9900;

}

Notice that there’s a div that wraps around the entire set of blocks. This is done so the other two divs will reside side by side when using the float: left; selector on each. The width of the wrapping div needs to be wide enough to accommodate both child divs plus their margins, borders and padding.

Another note, the IE special instruction is there since IE requires that the link itself be the same width of the div. Otherwise it won’t work in IE.

Obviously you can make this example as wide as you need it and add additional li’s to the mix. This type of setup would make a nice navigation system for a product page. You could even use Ajax to load content into another div on the page when these hyperlink blocks are clicked on.