hover image border disabled when i use $css

hover image border disabled when i use $css

i have 2 images, and the border of each lights up when i hover of them. fine. but as soon as i pick one, no more hover highlighting. i am using a $css() border modifier in the code, and i am sure that is what is goofing things up, but i can't figure any other way to put a border around an image when it has been picked..

here is my code :

<!doctype html>
<html>
  <head>

    <meta charset="utf-8">
    <title>my Gallery</title>
<style>

img:hover {border:2px solid blue;}

a:hover{border:2px solid blue;}
a:visited{border:10px solid black;}

.small{border:0px solid red;}
div.large{width:480px;height:480px;position:absolute; top:300px;left:600px;display:none;}

</style>

  </head>

  <body>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>


<img src="C.jpg" id="C-small" class="small" alt="" onclick="this()" style="position:absolute;top:50px;left:50px;width:125px;height:125px;"/>


<div id="C-large" class="large" style="background-image:url('C.jpg');"></div>


<img src="hotdog.jpg" id="H-small" class="small" alt="" onclick="this()" style="position:absolute;top:50px;left:200px;width:125px;height:125px;"/>

<div id="H-large" class="large" style="background-image:url('hotdog.jpg');"></div>



<script>
$(document).ready(function() {
$("#C-large").show("fast");
$("#C-small").css({
"border":"3px solid green"});
});
</script>

<script>
$("#C-small").click(function() {
if ( $('#C-large').is(':hidden')){
$(".small").css({
"border":"0px solid green"});
$(".large").hide("slow");
$("#C-large").show("slow");
$("#C-small").css({
"border":"3px solid green"});}
});
</script>

<script>
$("#H-small").click(function() {
if ( $('#H-large').is(':hidden')){
$(".small").css({
"border":"0px solid green"});
$(".large").hide("slow");
$("#H-large").show("slow");
$("#H-small").css({
"border":"3px solid green"});}
});
</script>


  </body>

</html>

i have been wrestling with this for more than a day, and maybe i'm just too punchy to see an obvious answer.

all i want is for the thumbnail image border to highlight (and stay that way till i pick the other thumb) when i pick it, but if i hover over the other thumb, the hover frame should still work. i have many thumbs, i just pared this down for ease of discussion.

any suggestions ?