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

本篇内容主要讲解“html怎么实现鼠标经过展开效果”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“html怎么实现鼠标经过展开效果”吧!
　　分析
　　我们观察到，当鼠标悬停在导航栏的项目中，出现从中间向左右展开的背景效果；移开时，又从左右向中间收缩。可以做出如下分析：
　　文字本身是没有展开和收缩效果，说明文字与背景不是同一个元素。
　　文字在背景上面显示，文字元素与背景元素是上下层关系，也就是存在定位。
　　背景展开和收缩有明显的过渡效果。
　　实现
　　根据以上三点，我们逐个突破。
　　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;
　　rig免费云主机、域名ht: 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怎么实现鼠标经过展开效果”有了更深的了解，不妨来实际操作一番吧！这里是云技术网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！

相关推荐: const关键字实例分析

本文小编为大家详细介绍“const关键字实例分析”，内容详细，步骤清晰，细节处理妥当，希望这篇“const关键字实例分析”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。 　　const 关键字 　　const 用于声明一个或多个常量，…