html怎么实现鼠标经过展开效果

本篇内容主要讲解“html怎么实现鼠标经过展开效果”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“html怎么实现鼠标经过展开效果”吧!

十年的和布克赛尔蒙古网站建设经验，针对设计、前端、开发、售后、文案、推广等六对一服务，响应快，48小时及时工作处理。全网整合营销推广的优势是能够根据用户设备显示端的尺寸不同，自动调整和布克赛尔蒙古建站的显示方式，使网站能够适用不同显示终端，在浏览器中调整网站的宽度，无论在任何一种浏览器上浏览网站，都能展现优雅布局与设计，从而大程度地提升浏览体验。成都创新互联从事“和布克赛尔蒙古网站设计”,“和布克赛尔蒙古网站推广”以来，每个客户项目都认真落实执行。

分析

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

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

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

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

实现

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

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;

}

到此，相信大家对“html怎么实现鼠标经过展开效果”有了更深的了解，不妨来实际操作一番吧！这里是创新互联网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！