jQuery preventing CSS rule once hovered

I have the following code -

<p id="rightSide">When I’m not designing websites you can find me posting on 
<a href="https://www.facebook.com" target="_blank" id="linkTopFacebook">Facebook</a> or 
<a href="https://twitter.com" target="_blank" id="linkTopTwitter">tweeting</a> 
very useless but at times funny things or, if I’m out and about, taking the occasional 
<a href="http://instagram.com" target="_blank" id="linkTopInstagram">photo</a> on my
iPhone.<br><br>In addition to the above you can also contact me by <a 
href="mailto:hello.com" id="linkTopMail">Email</a> or by calling me on 123456789.</p>

            <div id="contactTop">

                <a href="mailto:hello.com"><i class="icon-envelope-alt" id="topMail"></i></a>
                <a href="http://uk.linkedin.com/" target="_blank"><i class="icon-linkedin" id="topLinked"></i></a>
                <a href="https://www.facebook.com" target="_blank"><i class="icon-facebook" id="topFacebook"></i></a>
                <a href="https://twitter.com" target="_blank"><i class="icon-twitter" id="topTwitter"></i></a>
                <a href="http://instagram.com" target="_blank"><i class="icon-instagram" id="topInstagram"></i></a>

            </div>

With the following jQuery -

$(document).ready(function(){

// Facebook top link

$("#linkTopFacebook").hover(function(){
    $("#topFacebook").css("color", "#3C58A1");
},
    function() {
    $("#topFacebook").css("color", "#B3B3B3");
    });

// Twitter top link

$("#linkTopTwitter").hover(function(){
    $("#topTwitter").css("color", "#21CCFC");
},
    function() {
    $("#topTwitter").css("color", "#B3B3B3");
    $("#topTwitter").preventDefault();
    });

// Instagram top link

$("#linkTopInstagram").hover(function(){
    $("#topInstagram").css("color", "#A4765C");
},
    function() {
    $("#topInstagram").css("color", "#B3B3B3");
    });

// Email top link

$("#linkTopMail").hover(function(){
    $("#topMail").css("color", "#CDC93E");
},
    function() {
    $("#topMail").css("color", "#B3B3B3");
    });


});

and finally CSS -

div#contactTop a {
text-decoration:none;
}

div#contactTop i#topMail:hover {
color:#CDC93E;
}

div#contactTop i#topFacebook:hover {
color:#3C58A1;
}

div#contactTop i#topTwitter:hover {
color:#21CCFC;
}

div#contactTop i#topInstagram:hover {
color:#A4765C;
}

div#contactTop i#topLinked:hover {
color:#1174B3;
}

It seems that if I hover over the text link, activating the jQuery code that any future hover over the icon results in the CSS hover code being ignored. I have a suspicion that this is being caused by jQuery but as a novice I am unsure how to resolve.

I'm looking for both the jQuery and CSS rules to work separately regardless if whether the jQuery style was activated first.

Any help would be gratefully received.

Thanks.