w3school给出的这个transition效果例子是在当前div被hover时平滑过渡改变其宽度(http://www.w3school.com.cn/tiy/t.asp?f=css3_transition1)

其示例程序是：

div {
       width:100px;    height:100px;    background:yellow;    transition:width 2s;    -moz-transition:width 2s; /* Firefox 4 */    -webkit-transition:width 2s; /* Safari and Chrome */    -o-transition:width 2s; /* Opera */}div:hover {
       width:300px;}

 

那么，当超链接“背景”需要这样的效果该如何实现呢？这里我们可以看到上面的实例只在当前层被hover时过渡渐变自身宽度，实例中只有“1层”——即一个当前div层，而这里的目标场景下我觉得至少包含“2层”(因为我觉得background背景似乎不能渐变，所以需要额外的img来模拟“背景层”)，先看看我的HTML结构和CSS表现：

     
        
              
      网站首页    
     
    
     
        
              
      品牌故事    
     
    
     
        
              
      产品家族    
     

.a {
       display:inline-block;    *display:inline;    *zoom:1;    width:85px;    height:95px; /*定义父div层内容区高度*/    vertical-align:top;    text-align:center;    line-height:95px;    float:left;    position:relative;}.a a {
       color:#FFFEFF;    text-decoration:none;}.a .aback {
       width:85px;    height:0; /*定义“背景层”初始高度为0，达到初始时"背景层"不可见的效果*/    position:absolute;    z-index:-1;    display:block;    transition:height 1s;    -moz-transition:height 1s; /* Firefox 4 */    -webkit-transition:height 1s; /* Safari and Chrome */    -o-transition:height 1s; /* Opera */}

<父div与子img及a在HTML级形成两层层次关系；img和a在CSS级形成两层层次关系>

显然这里的“背景”层已经不像w3school实例中的纯粹的“当前层”，那么怎样实现在超链接层被hover时其兄弟层——“背景”层变得像“当前层”类似拥有过渡渐变的效果呢？我觉得可以用JS来模拟“当前层的CSS hover”，下面先给出一种简单的做法：

$(function () {        $('.a').hover(            function () {                $(this).children('.aback').css('height', 95);            },            function () {                $(this).children('.aback').css('height', 0);            }        );    });

另外，附上img图片，就是这蓝色的从上到下过渡渐变效果的“背景”层

 

最后一点小猜想，改变图片透明度让蓝色图片没有绿色背景而全透明，再改变z-index值为1让“背景层”处在超链接层之上，估计当div层被hover时可能会造成超链接不可点击的情况

 

归于简，归于无，菜鸟教程的这个效果不也提供了一个思路么？而且非常简约http://www.runoob.com/try/tryit.php?filename=jqueryui-api-blind-effect