CSS Hover Divides

I was recently working on a project that had a news section. This news section had rows (divs) for each headline. I wanted each div to change colors as the mouse rolled over them, which could have easily been done with JavaScript. Instead, I did some research, and through the help of a couple sites I came up with a full CSS Solution and this is what I got.

The CSS

.menu a {
	display: block;
	width: 248px;
	height: 23px;
	text-indent: 40px;
	color: #5f6b85;
	text-decoration: none;
	font-family: arial, sans-serif;
	font-size: 14pt;
	}

.menu a:hover {
	background-image: url(images/navbg.gif);
	display: block;
	width: 248px;
	height: 23px;
	}

.news a {
	display: block;
	width: 540px;
	height: 80px;
	text-indent: 5px;
	color: #3d3d3d;
	text-decoration: none;
	font-family: arial, sans-serif;
	font-size: 10pt;
	}

.news a:hover {
	background-color: #d3d3d3;
	display: block;
	width: 540px;
	height: 80px;
	cursor: crosshair;
	}

The HTML

<div class="news">
<a href="#">This div rollover script is actually pretty simple and full CSS. You make a class hyperlink definition for your rollover area with a fixed
width and height. Set the display to block and define your background. Next make a definition for your hover hyperlink and set the bg and display to block.
That it, simple as 1, 2 3!</a>
<a href="#">Script designed by Cody Barks of CarbonCyber. Copyright 2007, All rights reserved. Script may be downloaded and used, as long as link to CarbonCyber is provided on the site</a>
</div>

View Example | Download Files