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.rhkb.cn/news/473402.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

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

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

【项目开发】URL中井号(#)的技术细节

未经许可,不得转载。 文章目录 前言一、# 的基本含义二、# 不参与 HTTP 请求三、# 后的字符处理机制四、# 的变化不会触发网页重新加载五、# 的变化会记录在浏览器历史中六、通过 window.location.hash 操作七、onhashchange 事件八、Google 对 # 的处理机制前言 2023 年 9 月…

AUTOSAR_EXP_ARAComAPI的7章笔记(5)

☞返回总目录 相关总结&#xff1a;典型的 SOME/IP 多绑定用例总结 7.3.3 典型的SOME/IP多绑定用例 在前面的章节中&#xff0c;我们简要提到&#xff0c;在一个典型的SOME/IP 网络协议的部署场景中&#xff0c;AP SWC不太可能自己打开套接字连接来与远程服务通信。为什么不…

Jenkins下载安装、构建部署到linux远程启动运行

Jenkins详细教程 Winodws下载安装Jenkins一、Jenkins配置Plugins插件管理1、汉化插件2、Maven插件3、重启Jenkins&#xff1a;Restart Safely插件4、文件传输&#xff1a;Publish Over SSH5、gitee插件6、清理插件&#xff1a;workspace cleanup system系统配置1、Gitee配置2、…

Flutter:Dio下载文件到本地

import dart:io; import package:dio/dio.dart;main(){// 创建dio对象final dio Dio();// 下载地址var url https://*******.org/files/1.0.0.apk;// 手机端路径String savePath Directory.systemTemp.path/ceshi.apk;print(savePath);downLoad(dio,url,savePath); }downLo…

【C++笔记】C++三大特性之多态

【C笔记】C三大特性之多态 &#x1f525;个人主页&#xff1a;大白的编程日记 &#x1f525;专栏&#xff1a;C笔记 文章目录 【C笔记】C三大特性之多态前言一.多态1.1 多态的概念1.2 虚函数1.3 虚函数的重写/覆盖1.4 多态的定义及实现 二.虚函数重写的⼀些其他问题2.1 协变(…

2.STM32之通信接口《精讲》之USART通信

有关通信详解进我主页观看其他文章&#xff01;【免费】SPIIICUARTRS232/485-详细版_UART、IIC、SPI资源-CSDN文库 通过以上可以看出。根据电频标准&#xff0c;可以分为TTL电平&#xff0c;RS232电平&#xff0c;RS485电平&#xff0c;这些本质上都属于串口通信。有区别的仅是…

麒麟V10,arm64,离线安装docker和docker-compose

文章目录 一、下载1.1 docker1.2 docker-compose1.3 docker.service 二、安装三、验证安装成功3.1 docker3.2 docker-compose 需要在离线环境的系统了里面安装docker。目前国产化主推的是麒麟os和鲲鹏的cpu&#xff0c;这块的教程还比较少&#xff0c;记录一下。 # cat /etc/ky…

云原生之运维监控实践-使用Telegraf、Prometheus与Grafana实现对InfluxDB服务的监测

背景 如果你要为应用程序构建规范或用户故事&#xff0c;那么务必先把应用程序每个组件的监控指标考虑进来&#xff0c;千万不要等到项目结束或部署之前再做这件事情。——《Prometheus监控实战》 去年写了一篇在Docker环境下部署若依微服务ruoyi-cloud项目的文章&#xff0c;当…

三十九、Python(pytest框架-中)

一、执行用例的方式 1.工具执行 2.在终端使用命令行运行 命令&#xff1a;pytest -s 用例代码文件 -s 的作用是输出显示代码中的 print。 3.在主函数main中执行 if __name__ "__main__": # 主函数pytest.main([-s, 用例代码文件]) import pytestclass TestDemo…

丹摩征文活动|丹摩助力selenium实现大麦网抢票

丹摩征文活动&#xff5c;丹摩助力selenium实现大麦网抢票 1.引言 在人工智能飞速发展的今天&#xff0c;丹摩智算平台&#xff08;DAMODEL&#xff09;以其卓越的AI算力服务脱颖而出&#xff0c;为开发者提供了一个简化AI开发流程的强大工具。通过租赁GPU资源&#xff0c;丹…

【计算机网络】协议定制

一、结构化数据传输流程 这里涉及协议定制、序列化/反序列化的知识 对于序列化和反序列化&#xff0c;有现成的解决方案&#xff1a;①json ②probuff ③xml 二、理解发送接收函数 我们调用的所有发送/接收函数&#xff0c;根本就不是把数据发送到网络中&#xff01;本质都是…

大数据-226 离线数仓 - Flume 优化配置 自定义拦截器 拦截原理 拦截器实现 Java

点一下关注吧&#xff01;&#xff01;&#xff01;非常感谢&#xff01;&#xff01;持续更新&#xff01;&#xff01;&#xff01; Java篇开始了&#xff01; 目前开始更新 MyBatis&#xff0c;一起深入浅出&#xff01; 目前已经更新到了&#xff1a; Hadoop&#xff0…

AI行业动态:AGI预测、模型进化与工具革新

本周&#xff0c;人工智能&#xff08;AI&#xff09;领域的新闻层出不穷&#xff0c;从关于通用人工智能&#xff08;AGI&#xff09;何时到来的预测&#xff0c;到模型训练与推理技术的突破&#xff0c;再到各种实用工具的更新迭代&#xff0c;精彩纷呈。让我们一起深入了解这…

vue3 如何调用第三方npm包内部的 pinia 状态管理库方法

抛砖引玉: 如果在开发vue3项目是, 引用了npm第三方包 ,而且这个包内使用了Pinia 状态管理库,那我们如何去调用 npm内部的 Pinia 状态管理库呢? 实际遇到的问题: 今天在制作npm包时遇到的问题,之前Vue2版本的时候状态管理库用的Vuex ,当时调用npm包内的状态管理库很简单,直接引…

AWTK-WIDGET-WEB-VIEW 实现笔记 (4) - Ubuntu

Ubuntu 上实现 AWTK-WIDGET-WEB-VIEW 开始以为很简单&#xff0c;后来发现是最麻烦的。因为 Ubuntu 上的 webview 库是 基于 GTK 的&#xff0c;而 AWTK 是基于 X11 的&#xff0c;两者的窗口系统不同&#xff0c;所以期间踩了几个大坑。 1. 编译 AWTK 在使用 Linux 的输入法时…

C++之内存管理

​ &#x1f339;个人主页&#x1f339;&#xff1a;喜欢草莓熊的bear &#x1f339;专栏&#x1f339;&#xff1a;C入门 目录 前言 一、C/C内存分配 二、 malloc、calloc、realloc、free 三、C内存管理方式 3.1 new/delete 操作内置类型 3.2 new和detele操作自定义类型…

Visual Studio 2017 快捷键设置-批量注释和批量取消注释

一.批量注释设置&#xff1a; 1&#xff09;打开Visual Studio 2017,点击菜单栏中的“工具”&#xff0c;然后选中“选项”&#xff1a; 2&#xff09;选中“键盘”&#xff0c;在“显示命令包含”输入框中输入“注释”&#xff1a; 3&#xff09;选中“编辑&#xff1a;注释选…

从零入门激光SLAM(二十三)——direct_visual_lidar_calibration全型号激光雷达-相机标定包

大家好呀&#xff0c;我是一个SLAM方向的在读博士&#xff0c;深知SLAM学习过程一路走来的坎坷&#xff0c;也十分感谢各位大佬的优质文章和源码。随着知识的越来越多&#xff0c;越来越细&#xff0c;我准备整理一个自己的激光SLAM学习笔记专栏&#xff0c;从0带大家快速上手激…

蓝桥杯备赛(持续更新)

16届蓝桥杯算法类知识图谱.pdf 1. 格式打印 %03d&#xff1a;如果是两位数&#xff0c;将会在前面添上一位0 %.2f&#xff1a;会保留两位小数 如果是long&#xff0c;必须在数字后面加上L。 2. 进制转化 2.1. 十进制转任意进制&#xff1a; 十进制转任意进制时&#xff…