制作伸缩上下篇文章导航

就像大学时说过的，上课是写日志的好时机，现在变成，上班是写日志的好时机。其实我不知道这个上下篇文章导航是不是叫这个名字，也不知道大家知不知道，随缘吧。直接撸代码了。

HTML:

<div class="archivenav">
    <php if (get_previous_post()) { ?><div class="alignleft pre"><span><?php previous_post_link( '%link' ); ?></span></div><?php } ?>
    <php if (get_next_post()) { ?><div class="alignright next"><span><?php next_post_link( '%link' ); ?></span></div><?php } ?>
</div>

CSS:

.archivenav{font-size:16px;width:640px}
.archivenav span{display:none}
.archivenav a{color:#FFF}
.archivenav a:hover{color:#CCC}
.archivenav .pre,.archivenav .next{background:#000;color:#FFF;font-weight:700;height:40px;
line-height:40px;margin:-25px 0 0;position:fixed;top: 50%;white-space: nowrap;z-index:99}
.archivenav .pre{background:url("images/arrows.gif") no-repeat scroll right 13px #606060;border-radius:0 8px 8px 0;left:0;padding:5px 40px 5px 5px}
.archivenav .next{background:url("images/arrows.gif") no-repeat scroll left -77px #606060;border-radius:8px 0 0 8px;right:0;padding:5px 5px 5px 40px}

jQuery:

$(function(){
    $('.pre').hover(
        function(){
            $(this).find('span').css("display","block");
            },
        function(){
            $(this).find('span').css("display","none");
    });
    $('.next').hover(
        function(){
            $(this).find('span').css("display","block");
        },
        function(){
            $(this).find('span').css("display","none");
    });
});

素材图片：右键另存