react中如何在一张图片上加一个灰色蒙层,并添加事件?

最终效果:

在这里插入图片描述

实现原理:

  1. 移动到图片上的时候,给img加一个伪类
    !!此时就要地方要注意了,因为img标签是闭合的标签,无法直接添加 伪类(::after),所以
    我是在img外层加了一个span标签,方便加上伪类,实现浮层的效果
  2. 给元素绑定对应的点击事件

废话不多说,上代码!!!!

// 鼠标移动到图片时,将图片包裹在span标签中const handleHover = (event: any) => {if (event.target.tagName.toLowerCase() === 'img') {// 确保只对img标签进行操作const imgElement = event.target;// 检查img元素是否已经被包裹在一个具有'class="wrapper"'的div里if (imgElement.parentNode &&imgElement.parentNode.tagName.toLowerCase() === 'span' &&imgElement.parentNode.classList.contains('wrapper')) {return; // 如果已经包裹了就退出函数}// 创建一个新的div元素const wrapper = document.createElement('span');wrapper.className = 'wrapper'; // 给新的div设置类名以便于CSS控制// 将img元素插入到新的div中imgElement.parentNode.insertBefore(wrapper, imgElement); // 在img之前插入wrapperwrapper.appendChild(imgElement); // 把img移到wrapper里}};useEffect(() => {window.addEventListener('click', handleClickHtmlContent);const container: any = document.getElementById('container');// 监听所有img标签的mouseover事件container?.addEventListener('mouseover', handleHover);return () => {window.removeEventListener('click', handleClickHtmlContent);container?.removeEventListener('mouseover', handleHover);};}, []);// 点击html渲染区域的图片时,调起Antd组件Image的预览const handleClickHtmlContent = (e: any) => {if (e.target.closest('#container p .wrapper')) {const url = e.target.querySelector('img')?.src;Modal.confirm({title: '确认发送该图片?',centered: true,icon: null,content: (<img width={360} src={url} />),okText: '确认',onOk: () => {console.log('确认发送');},});}};// html
<div id="container"><img src="123.png"/>
</div>// css#container {.wrapper {position: relative;display: inline-block;&:hover {cursor: pointer;box-shadow: 0 0 5px #ccc;&::after {opacity: 1;}}&::after {content: '点击发送图片';position: absolute;text-align: center;align-content: center;top: 0;left: 0;display: block;width: 100%;height: 100%;max-height: 250px;color: #fff;background: rgba(0, 0, 0, 0.5); /* 示例背景色 */opacity: 0; /* 初始状态隐藏 */transition: opacity 0.3s ease; /* 添加过渡效果 */}}img {max-height: 250px;width: auto !important;}
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.xdnf.cn/news/14228.html

如若内容造成侵权/违法违规/事实不符,请联系一条长河网进行投诉反馈,一经查实,立即删除!

相关文章

微搭低代码入门03函数

目录 1 函数的定义与调用2 参数与返回值3 默认参数4 将功能拆分成小函数5 函数表达式6 箭头函数7 低代码中的函数总结 在用低代码开发软件的时候&#xff0c;除了我们上两节介绍的变量、条件语句外&#xff0c;还有一个重要的概念叫函数。函数是执行特定功能的代码片段&#xf…

Zabbix中文监控指标数据乱码

1&#xff09;点击主机&#xff0c;选择Zabbix server 中的 图形 一项&#xff0c;可以看到当前显示的为乱码 2&#xff09; 下载字体文件&#xff1a; https://gitcode.com/open-source-toolkit/4a3db/blob/main/SimHei.zip 解压unzip -x SimHei.zip 3&#xff09; 替换字体文…

限价订单簿中的高频交易

数量技术宅团队在CSDN学院推出了量化投资系列课程 欢迎有兴趣系统学习量化投资的同学&#xff0c;点击下方链接报名&#xff1a; 量化投资速成营&#xff08;入门课程&#xff09; Python股票量化投资 Python期货量化投资 Python数字货币量化投资 C语言CTP期货交易系统开…

JDBC事务管理、四大特征(ACID)、事务提交与回滚、MySQL事务管理

目录 一、什么是JDBC事务&#xff1f; &#xff08;1&#xff09;事务概念。 &#xff08;2&#xff09;JDBC事务的实现。 1、提交。 2、回滚。 &#xff08;3&#xff09;生活中可以类比 JDBC 事务的例子。 1、以网上购物为例。 二、JDBC的四大事务&#xff08;ACID&#xff0…

操作系统离散存储练习题

1. (简答题)分页存储管理系统具有快表&#xff0c;内存访问时间为2ns&#xff0c;检索快表时间为0.5ns&#xff0c;快表命中率为80%&#xff0c;求有效访问时间 -分析&#xff1a;首先访问缓存&#xff08;快表&#xff09;&#xff0c;如果没有找到访问内存&#xff08;页表&…

【AI日报】2024年11月13号

我回来啦&#xff01;&#xff01;发现自己好久不发文章了。 在某头部AI公众号实习的过程中&#xff0c;学到太多太多了&#xff0c;也感谢某位大神的指点&#xff0c;也衷心祝愿他的IP可以越做越好 之后因为时间关系&#xff0c;可能要自己出来单干了。 在实习过程中学到的…

inline内联函数(C++)

a&#xff09;⽤inline修饰的函数叫做内联函数&#xff0c;编译时C编译器会在调⽤的地⽅展开内联函数&#xff0c;这样调⽤内联函数就不需要建⽴栈帧了&#xff0c;就可以提⾼效率。 b&#xff09;inline对于编译器⽽⾔只是⼀个建议&#xff0c;也就是说&#xff0c;你加了inl…

C++builder中的人工智能(27):如何将 GPT-3 API 集成到 C++ 中

人工智能软件和硬件技术正在迅速发展。我们每天都能看到新的进步。其中一个巨大的飞跃是我们拥有更多基于自然语言处理&#xff08;NLP&#xff09;和深度学习&#xff08;DL&#xff09;机制的逻辑性更强的AI聊天应用。有许多AI工具可以用来开发由C、C、Delphi、Python等编程语…

Harmony- List组件最后一个item显示不全

在使用List组件显示数据的时候会出现最后一个item显示不全的问题&#xff0c;如下 出现在高度问题上&#xff0c;如果List组件上下没有其他占位组件就是正常显示的 解决方案&#xff1a; 1.给List组件加上layoutWeight(1)&#xff0c;使它填满父控件剩余空间; 2.还有一种情况…

neo4j desktop基本入门

下载安装不在赘述&#xff0c;本文只记述一些neo4j的基本入门操作 连接本地neo4j数据库 1. 点击ADD添加连接 端口一般是7687 账户名和密码忘记了&#xff0c;可以通过neo4j web&#xff08;默认为neo4jneo4j://localhost:7687/neo4j - Neo4j Browser&#xff09;重置密码 AL…

function and task

任务和函数 在Verilog语言中提供了任务和函数&#xff0c;可以将较大的行为级设计划分为较小的代码段&#xff0c;允许设计者将需要在多个地方重复使用的相同代码提取出来&#xff0c;编写成任务和函数&#xff0c;这样可以使代码更加简洁和易懂。 1.1任务 任务的定义 任务定义…

24/11/13 算法笔记<强化学习> DQN算法

DQN算法的主要特点包括&#xff1a; 神经网络代替Q表&#xff1a;在传统的Q学习中&#xff0c;需要维护一个Q表来存储每个状态-动作对的Q值。而在DQN中&#xff0c;使用神经网络来近似这些Q值&#xff0c;这使得算法能够处理具有大量状态和动作的问题。 经验回放&#xff08;E…

blind-watermark - 水印绑定

文章目录 一、关于 blind-watermark安装 二、bash 中使用三、Python 调用1、基本使用2、attacks on Watermarked Image3、embed images4、embed array of bits 四、并发五、相关 Project 一、关于 blind-watermark Blind watermark 基于 DWT-DCT-SVD. github : https://githu…

Qt_day10_程序打包(完结)

目录 1. 设置图标 2. Debug和Release版本 3. 动态链接库 4. 打包 5. 联系项目要求 Qt开发的程序最终都是要给用户使用的&#xff0c;用户的电脑上不可能装一个Qt的开发环境导入项目使用。因此项目项目开发完成后需要打包——制作成安装包&#xff0c;用户直接下载并安装即可使用…

【C语言】指针的运算

指针的增量操作&#xff1a; int i 10; int *p &i;printf("p %p\n", p);//1024p; // 增加int 4个字节大小printf("p %p\n", p);//1028指针的增量运算取决于指针的数据类型&#xff0c;它将会增加数据类型的大小的字节。 指针的减量操作与增量同理…

C++builder中的人工智能(28):FANN: Fast Artificial Neural Networks快速人工神经网络(ANNs)

这篇文章全面介绍了快速人工神经网络&#xff08;ANNs&#xff09;的世界&#xff0c;探讨了它们在现代计算智能中的重要地位、核心特点、应用领域以及未来发展。 快速人工神经网络库&#xff08;Fast Artificial Neural Network Library&#xff0c;简称FANN&#xff09;是一…

零基础Java第十六期:抽象类接口(二)

目录 一、接口&#xff08;补&#xff09; 1.1. 数组对象排序 1.2. 克隆接口 1.3. 浅拷贝和深拷贝 1.4. 抽象类和接口的区别 一、接口&#xff08;补&#xff09; 1.1. 数组对象排序 我们在讲一维数组的时候&#xff0c;使用到冒泡排序来对数组里的元素进行从小到大或从大…

wafw00f源码详细解析

声明 本人菜鸟一枚&#xff0c;为了完成作业&#xff0c;发现网上所有的关于wafw00f的源码解析都是这抄那那抄这的&#xff0c;没有新东西&#xff0c;所以这里给出一个详细的源码解析&#xff0c;可能有错误&#xff0c;如果有大佬发现错误&#xff0c;可以在评论区平和的指出…

Bilibili-超能用户榜入口优化-技术方案反思与总结

目录 客户端实现&#xff1a; 高能用户入口实现逻辑&#xff1a; 接口服务信息&#xff08;服务端下发&#xff09;&#xff1a; 执行方案&#xff1a; (1)数据类新增服务端下发字段 ​编辑 (2) UI添加 寻找思路&#xff1a; &#xff08;3&#xff09;超能用户icon显示…

终端打开程序、为什么要用pycharm

方法一&#xff1a;cd文件路径 方法二&#xff1a;输入cmd 为什么终端可以运行python代码&#xff0c;还需要pycharm&#xff1f;——让写代码的过程更加简单 学习视频&#xff1a;【最详细的 Windows 下 PyTorch 入门深度学习环境安装与配置 CPU GPU 版 | 土堆教程】https://w…