How to specify a CSS border on hover around thumbnails?

[James23]

How to correctly specify a .CSS border on hover around thumbnails? I want add external css for thumbnails, normal:\[code\]border-color: #cccccc;border-style: solid;border-width: 1px;\[/code\]and hover:\[code\] border-color: #0000FF; border-style: solid; border-width: 1px;\[/code\]html:\[code\]<div class="item-list"><ul id="field-slideshow-1-pager" class="field-slideshow-pager slides-4"><li class="first"><a href="http://stackoverflow.com/questions/12270772/#"><img class="field-slideshow-thumbnail field-slideshow-thumbnail-1" typeof="foaf:Image" src="http://ecx.images-amazon.com/images/I/41MNf5JEQ1L._SL75_SS45_.jpg" width="80" height="80" alt="" /></a></li><li><a href="http://stackoverflow.com/questions/12270772/#"><img class="field-slideshow-thumbnail field-slideshow-thumbnail-2" typeof="foaf:Image" src="http://ecx.images-amazon.com/images/I/410ONnNmmJL._SL75_SS45_.jpg" width="80" height="80" alt="" /></a></li><li><a href="http://stackoverflow.com/questions/12270772/#"><img class="field-slideshow-thumbnail field-slideshow-thumbnail-3" typeof="foaf:Image" src="http://ecx.images-amazon.com/images/I/41lyduCW9CL._SL75_SS45_.jpg" width="80" height="80" alt="" /></a></li><li class="last"><a href="http://stackoverflow.com/questions/12270772/#"><img class="field-slideshow-thumbnail field-slideshow-thumbnail-4" typeof="foaf:Image" src="http://ecx.images-amazon.com/images/I/41VHLWxrbcL._SL75_SS45_.jpg" width="80" height="80" alt="" /></a></li></ul></div>\[/code\]The thumbs img class have different nubmers at the end, just not sure.