antd鼠标悬浮图片出现提示蒙层

纸船儿飘～

已于 2022-03-10 13:43:59 修改

阅读量1.4k

点赞数

分类专栏： antd javascript 文章标签： javascript less

于 2021-11-03 11:20:53 首次发布

本文链接：https://blog.csdn.net/weixin_45869418/article/details/121117046

版权

antd 同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

javascript

2 篇文章 0 订阅

订阅专栏

js关键代码

<div className={styles.entpLogo}>
	<img className={styles.image} src={'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png'} />
	{/* 以下的span标签 是设定的 蒙层 */}
	<span key={3} className={styles.masker}>我是蒙层</span></div>

样式文件

.image {
  position: relative;
  width: 56px;
  height: 56px;
  margin-top: 44px;
  border-radius: 50%;
}

.masker{
  display: block;
  position: absolute;
  // 设定为圆形
  border-radius: 50%;
  opacity: 0;
  line-height: 18px;
  text-align: center;
  transition: opacity .3s;
  // 以下属性根据页面调整，使得蒙层遮盖住原涂层
  padding: 9px;
  top: 44px;
  width: 56px;
  height: 56px;
  color: #fff;
  background: #1889FD;
  font-size: 14px;
}

// 通过hover设定为鼠标悬浮时触发，更改蒙层的透明度，实现遮罩的效果
.entpLogo:hover>.masker{
  opacity: 0.8;
}