在React.js中将鼠标悬停在图像文本上

作者 : IT 大叔 本文共334个字,预计阅读时间需要1分钟 发布时间: 2021-04-12

在本文中,我将通过几个步骤来说明如何将鼠标悬停在图像上的文本。

步骤1:JSX

在React.js中将鼠标悬停在图像文本上插图

  • 导入图片
  • 给图片一些基本的样式

结果:
在React.js中将鼠标悬停在图像文本上插图(2)

步骤2:CSS-第1部分

在React.js中将鼠标悬停在图像文本上插图(4)

  • 将图片容器的位置设置为相对:这将使我们可以将图片叠加层的位置设置为绝对位置,以便它可以覆盖图片容器
  • 将图像的宽度设置为100%,并与display:块一起填充整个容器

步骤3:CSS-第2部分

在React.js中将鼠标悬停在图像文本上插图(6)

  • 前4行确保覆盖层覆盖了整个容器
  • 我已将覆盖背景设置为黑色,并将其不透明度设置为0以将其隐藏
  • 我设置了一个过渡期,以后可以使覆盖显示得更平滑,而不是立即显示
  • flex属性和颜色是用于悬停时将显示的文本的

步骤4:CSS-第3部分

在React.js中将鼠标悬停在图像文本上插图(8)

  • 我将不透明度设置为1以使叠加层显示
  • 我为覆盖层选择了纯色
  • 最后我在样式化叠加文字

这是我的第一篇且易于理解的文章,希望对您有所帮助;)

免责声明:
1. 本站资源转自互联网,源码资源分享仅供交流学习,下载后切勿用于商业用途,否则开发者追究责任与本站无关!
2. 本站使用「署名 4.0 国际」创作协议,可自由转载、引用,但需署名原版权作者且注明文章出处
3. 未登录无法下载,登录使用金币下载所有资源。
IT小站 » 在React.js中将鼠标悬停在图像文本上

常见问题FAQ

没有金币/金币不足 怎么办?
本站已开通每日签到送金币,每日签到赠送五枚金币,金币可累积。
所有资源普通会员都能下载吗?
本站所有资源普通会员都可以下载,需要消耗金币下载的白金会员资源,通过每日签到,即可获取免费金币,金币可累积使用。

发表评论