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

 

　　分析

 

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

 

　　文字本身是没有展开和收缩效果，说明文字与背景不是同一个元素。

 

　　文字在背景上面显示，文字元素与背景元素是上下层关系，也就是存在定位。

 

　　背景展开和收缩有明显的过渡效果。

 

　　实现

 

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

 

　　1. 文本元素与背景元素

 

　　文本元素

 

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

 

　　HTML

 

　　项目

 

　　CSS

 

　　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;

 

　　}

 

　　大功告成。

 

　　完整代码

 

　　项目

 

　　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;

 

　　}

 

　　项目

 

　　拓展

 

　　既然可以实现从中间向左右展开，是否可以实现从中间向上下展开？

 

　　能否可以实现单向展开呢？（从左向右，从右向左，从上向下，从下向上）

 

　　能否可以实现从中间向上下左右同时展开呢？

 

　　能否可以实现对角方向展开呢？