CSS3 transition属性配合Js实现超链接“背景”过渡渐变出现效果

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表现：

    <div class="a">
        <img class="aback" src="Img/aback.png" />
        <a href="#">网站首页</a>
    </div>
    <div class="a">
        <img class="aback" src="Img/aback.png" />
        <a href="#">品牌故事</a>
    </div>
    <div class="a">
        <img class="aback" src="Img/aback.png" />
        <a href="#">产品家族</a>
    </div>

.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