how to create a border hover effect?

how to create a border hover effect?

Hi.

My name is Mark.

I am trying to create a border effect on hover so when the use hovers over a link the css border changes color
to create some interactivity and also as a point of reference too.

Here is the code so far I just do not know how to implement the fade effect for the border to fade on hover;

Is there any way that I can simply change this code to work with it.

Any help would be great.
Thanks a bunch!

  1. $(document).ready(function(){
    $(".recentbot3, .recentLeft, .recentbot2, .recentcol1, .recentcol2, .recentbotLeft").hover(function(){
    $(".recentbot3, .recentLeft, .recentbot2, .recentcol1, .recentcol2, .recentbotLeft").fadeTo("slow");
    $(this).css({"border-color":"#333333"});
    },function(){
    $(this).css({"border-color":"#cccccc"});
    });
    });