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

发布时间:2022-02-25 16:54:43 作者:iii
来源:亿速云 阅读:395

本篇内容主要讲解“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;

  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怎么实现鼠标经过展开效果”有了更深的了解,不妨来实际操作一番吧!这里是亿速云网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!

推荐阅读:
  1. Jquery实现点击展开隐藏效果
  2. HTML如何实现点击按钮展开菜单

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

html

上一篇:怎么用纯CSS实现一个圆环旋转错觉的动画效果

下一篇:CSS性能优化的五大工具是什么

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》