CSS3效果：鼠标悬停背景展开效果

看腻导航栏背景变色的hover效果，我们看一下比较特殊的hover效果。

分析

我们观察到，当鼠标悬停在导航栏的项目中，出现从中间向左右展开的背景效果；移开时，又从左右向中间收缩。可以做出如下分析：

文字本身是没有展开和收缩效果，说明文字与背景不是同一个元素。
文字在背景上面显示，文字元素与背景元素是上下层关系，也就是存在定位。
背景展开和收缩有明显的过渡效果。

实现

根据以上三点，我们逐个突破。

1. 文本元素与背景元素

文本元素
首先，文本使用span标签实现。加上宽高、居中等简单样式。
HTML

<span>项目</span>

span{
    display: inline-block;
    width: 100px;
    height: 30px;
    line-height: 30px;
    text-align: center;
}

背景元素
背景本身没有具体意义，只是用来修饰，我们可以使用span伪元素:after实现(这样可以减少一个专门表示背景的标签)。
CSS

span:after{
    content: "";
    background-color: #f00;
}

现在只能看到文字，还看不到背景色，因为背景元素没有内容也没有设置宽高。效果如图：

只能看到文字，背景色没有撑开

2. 在文本元素下面显示背景元素

元素层叠效果一般是父relative子absolute实现。

文本元素

span{
    display: inline-block;
    width: 100px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    position: relative;
}

背景元素

span:after{
    content: "";
    background-color: #f00;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    z-index: -1;
}

注意：top: 0;bottom: 0;right: 0;left: 0;作用是背景平铺整个文本元素。

3. 鼠标悬停背景元素展开

背景元素开始时位于水平中间位置，也就是说距离左右是文本元素长度的一半。当鼠标悬停到文本元素上，背景展开。

背景元素初始状态

span:after{
    content: "";
    background-color: #f00;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 50%;
    left: 50%;
    z-index: -1;
}

鼠标悬停背景元素展开

span:hover:after{
    right: 0;
    left: 0;
}

鼠标悬停马上显示背景色，效果如同span:hover直接改变颜色一致。我们还需要给背景元素加上过渡。

span:after{
    content: "";
    background-color: #f00;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 50%;
    left: 50%;
    z-index: -1;
    transition: 0.3s;
}

大功告成。

完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>项目</title>
    <style>
    span{
        display: inline-block;
        width: 100px;
        height: 30px;
        line-height: 30px;
        text-align: center;
        position: relative;
    }
    span:after{
        content: "";
        background-color: #f00;
        position: absolute;
        top: 0;
        bottom: 0;
        right: 50%;
        left: 50%;
        z-index: -1;
        transition: 0.3s;
    }
    span:hover:after{
            right: 0;
        left: 0;
    }
    </style>
</head>
<body>
<span>项目</span>
</body>
</html>