普通的CSS Hover最多就换一下背景图，不是很好看~我们利用jquery给它加上一些淡入的效果~

在这里看到这个例子，我想我还是自己练习一下吧·~效果可以看http://dragoninteractive.com/网站~，挺帅的~

实现原理

通过一个两张不同的图片，两个不同的层重叠在一起，顶层暂时透明，当鼠标移上去时，顶层由透明变成不透明，鼠标离开反之。

准备工作

用PS做一张图~如下图，注意记下高度是多少。我这张图的高度是两个40px的图

下面写代码
html结构：

1
            
<a id="logo" href="http://fatkun.com"><span>fatkun.com</span></a>

css代码：

  #logo {
margin : 0 auto ; position : relative ; /*相对定位,为了下面hover的绝对定位*/
background : url ( fatkun.png ) left top no-repeat ; /*设置背景图*/
width : 150px ; height : 40px ; /*注意这里高度*/
display : block ; text-indent : -9999px ; }
#logo .hover {
/*为JQ准备*/ background : url ( fatkun.png ) left bottom no-repeat ; /*background-position和上面不同*/
position : absolute ; /*为了使两张图片重叠在一起*/ t
op : 0 ; left : 0 ; height : 40px ; width : 150px ; }

最后最重要的JQuery代码出现了

  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
</script>
<script type="text/javascript">
$("#logo").append("<span class='hover'></span>");//添加一个标签用来和灰图重叠起来
$(".hover").css('opacity', 0);//先不显示
$(".hover").parent().hover(
function(){$(".hover").stop().animate({opacity: '1'},1000);},
function(){$(".hover").stop().animate({opacity: '0'},1000);});
</script>
实例： http://fatkun.com/demo/jquery-animate-background/