javascript - 我想淡化跨度的边框和背景而不影响其在jQuery中的内容

我正在网站的某些页面上制作一个导航系统，大致是这样的：

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

每个导航链接看起来像这样。我想要代表当前页面的链接
具有以下属性：

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

以及所有具有以下属性的导航链接：

padding: 0 6px 0 6px;

另外，我想使当前页面链接的边框和背景淡入.mouseenter()上的任何链接，并在.mouseleave()上淡出，除非它是当前页面，在这种情况下它不应淡出。我是jQuery的新手，我不知道该怎么做。

只要链接在页面上水平列出并具有我指定的属性，就不必完全按照我上面的格式放置链接。如果很重要，我的网站也已经在样式中使用了以下代码：

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;}

和

$(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);
    });
});

最佳答案

您可以放置​​两个body层，方法是将body2放置为绝对的body子元素，并将其绘制在body的顶部。使主体2包含边界信息，使主体包含内容。然后淡化body2。

但是此解决方案将要求内容同时存在于body和body2中，因为单击将被阻止到body并通过body2处理。

更新

<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);

});