I want to fade the border and background of a span without affecting its contents in jQuery

Question

I'm making a navigation system on some of the pages of my website that is roughly like this:

<a href="link"><span>Page</span></a>

Where each navigation link would look like that. I want the link representing current page to have the following properties:

background-color: buttonface; border: 2px solid grey; border-radius: 5px;

and all navigation links to have these properties:

padding: 0 6px 0 6px;

In addition I wanted to make the border and background of the current page's link fade into any link on .mouseenter() and fade out on .mouseleave() unless it is the current page in which case it should not fade out. I am relatively new to jQuery and I have no idea how to do this.

It isn't completely necessary for the links to be in the format I put above as long as they're listed horizontally across the page and have the properties I specified. If it matters my site also uses the following code for style already:

body{font-family: 'Raleway'; background: #F07400; color: black;   font-size: 18px; margin: 20px 0 20px 20px;}
button{font-size: 18px; font-family: 'Raleway'; border-radius: 5px; border: 2px solid grey;}

and

$(document).ready(function() {
    widthval = $(window).width()-40;
    $("body").css("width", widthval);
    $("body").fadeOut(0);
    $("body").fadeIn(1600);
    $(window).resize(function(){
        widthval = $(window).width()-40;
        $("body").css("width", widthval);
    });
});

Answer 1

You could layer two body layers, by placing a body2 positioned absolute as a child element of body, which would draw it ontop of body. Have the body 2 contain the border information and body contain the content. Then fade body2.

But this solution would require the content to exist in both body and body2 because clicks would be blocked to body and processed through body2.

updated

<div style="width:needed; height:needed;">
     <div2 style="position:absolute; width:sameAsBody; height:sameasbody" class="fade">
          this content will fade.
     </div2>
content content here will be faded to. If changing just the background it would be literially the same hence it appears that the content did not fade. 
</div>

$(document).ready(function(){

$(‘.fade’).fadeTo(2000, 1.0).fadeTo(4000, 0.0);

});