How do I get the border of an image to change color when hovering?

on this site here, you will see an image of the kitchen in the banner. there is a 5px border in a dark shade of green/blue that surrounds it. What is the code supposed to look like if I want that border to change a different color when hovering over that image?

the code for that border is;

a img.showcaseimage, img.showcaseimage a {
	float: left;
	border: 5px solid #002f2f;
	margin-right: 5px;
	}

Code (markup):

my current code to hover is;

a img.showcaseimage a:hover, img.showcaseimage a:hover, img.showcaseimage a a:hover {
	border: 5px solid red;
	}

Code (markup):

as you can see, i've tried various orientations of it, but the border wont' change color.

any insight would be appreciated.

 

Try this one:

a:hover img.showcaseimage , img.showcaseimage a:hover 
{
 border: 5px solid red;
}

Code (markup):

 

Doh. Why didn't I think of that. Thanks for the help. it works