Hi Guys,

I have a links div and I want a colour change on it:

HTML Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<style>
/* jobs box and Items */
   .jobs_box{
	background: #FFFFFF url(heading.png) no-repeat;
	width:184px;
	height:307px;
             margin-left: 3px;
	border-right: 1px solid #CC3333;
	border-bottom: 1px solid #CC3333;
	border-left: 1px solid #CC3333;
   }
   
 .top_grey_dashed {
 width: auto;
 border-top: 1px dashed #c0c0c0;
 height: 1px;
 margin-top: 60px;
 margin-bottom: 4px;
 overflow: hidden 
 }
 
 .job_title {
    font-family: Verdana, sans-serif;
    color: #333333;
    font-weight:bold;
    font-size: 11px;
    margin-left:4px;
}

 .job_salary {
    color: #666666;
    font-family: Verdana, sans-serif;
    font-weight:bold;
    font-size: 11px;
    margin-left:4px;
}

 .job_more {
    color: #0063AC;
    font-family: Verdana, sans-serif;
    font-weight:bold;
    font-size: 11px;
    margin-left:4px;
}

 .bottom_grey_dashed {
 width: auto;
 border-top: 1px dashed #c0c0c0;
 height: 1px;
 margin-top: 8px;
 overflow: hidden 
 }

</style>
<head>
<title>Hover needed</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body>
<div class="jobs_box">
<div class="top_grey_dashed"></div>
<div class="links">
<span class="job_title">Website Developer</span><br />
<span class="job_salary">&#163;50,000</span><br />
<span class="job_more"><img src="down_arrow.png"> Further Details</span><br />
</div> 
<div class="bottom_grey_dashed"></div>
</div>
</body>
</html>
But from what I have read this can't be done. I want the hover to occur between the dotted lines, but it only seems to be able to be done on an a: tag?

Can anyone help?

Thanks