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.mzph.cn/diannao/60915.shtml

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

相关文章

电子应用产品设计方案-11:全自动智能全屋智能系统设计方案

一、设计目标 打造便捷、舒适、安全且节能的全屋智能环境。 二、系统组成 1. 智能灯光系统 - 在客厅、卧室、厨房、卫生间等各处安装智能灯具&#xff0c;可通过手机 APP、语音控制实现开关、调光调色。如客厅设置多种场景模式&#xff0c;如“观影模式”&#xff08;灯光…

SpringBoot获取请求参数

spring boot获取请求参数 文章目录 spring boot获取请求参数一、简单参数二、实体参数三、数组集合参数四、日期参数五、Json参数六、路径参数 开头概述 在Spring Boot框架中&#xff0c;处理HTTP请求并获取请求参数是开发Web应用程序中的一项基本任务。无论是简单的GET请求还是…

服务端高并发分布式结构进阶之路

序言 在技术求知的旅途中&#xff0c;鉴于多数读者缺乏在中大型系统实践中的亲身体验&#xff0c;难以从宏观角度把握某些概念&#xff0c;因此&#xff0c;本文特选取“电子商务应用”作为实例&#xff0c;详细阐述从百级至千万级并发场景下服务端架构的逐步演变历程。同时&am…

WebRTC视频 02 - 视频采集类 VideoCaptureModule

WebRTC视频 01 - 视频采集整体架构 WebRTC视频 02 - 视频采集类 VideoCaptureModule&#xff08;本文&#xff09; WebRTC视频 03 - 视频采集类 VideoCaptureDS 上篇 WebRTC视频 04 - 视频采集类 VideoCaptureDS 中篇 WebRTC视频 05 - 视频采集类 VideoCaptureDS 下篇 一、前言…

POI实现根据PPTX模板渲染PPT

目录 1、前言 2、了解pptx文件结构 3、POI组件 3.1、引入依赖 3.2、常见的类 3.3、实现原理 3.4、关键代码片段 3.4.1、获取ppt实例 3.4.2、获取每页幻灯片 3.4.3、循环遍历幻灯片处理 3.4.3.1、文本 3.4.3.2、饼图 3.4.3.3、柱状图 3.4.3.4、表格 3.4.3.5、本地…

全国高校计算机能力挑战赛区域赛2019C++选择题题解

2019 1.下列选项中错误的是&#xff08;&#xff09;。 A.数组元素的地址计算与数组的存储方式有关 B.类的const成员函数不能修改类的成员变量 C.用const常量代替宏定义可以让编译器进行安全性检查 D.函数可以同时返回2个以上的值 解析: 本题选D,函数通常只能直接返回一个值,函…

sqli-labs靶场17-20关(每日四关)持续更新!!!

Less-17 打开靶场&#xff0c;发现页面比之前多了一行字 翻译过来就是&#xff0c;密码重置&#xff0c;大家肯定会想到&#xff0c;自己平时在日常生活中怎么密码重置&#xff0c;肯定是输入自己的用户名&#xff0c;输入旧密码&#xff0c;输入新密码就可以了&#xff0c;但…

Electron 沙盒模式与预加载脚本:保障桌面应用安全的关键机制

在 Electron 中&#xff0c;沙盒&#xff08;Sandbox&#xff09; 和 预加载脚本&#xff08;Preload&#xff09; 是关键的安全机制和架构概念。它们一起用于确保应用的安全性和稳定性&#xff0c;特别是当需要在渲染进程中访问某些系统资源时。以下是对沙盒模式和预加载脚本的…

node.js下载安装步骤整理

>> 进入node.js下载页面下载 | Node.js 中文网 >>点击 全部安装包 >>删除网址node后面部分&#xff0c;只保留如图所示部分&#xff0c;回车 >>点击进入v11.0.0/版本 >>点击下载node-v11.0.0-win-x64.zip(电脑是windows 64位操作系统适用) >…

ThinkServer SR658H V2服务器BMC做raid与装系统

目录 前提准备 一. 给磁盘做raid 二. 安装系统 前提准备 磁盘和系统BMC地址都已经准备好&#xff0c;可正常使用。 例&#xff1a; 设备BMC地址&#xff1a;10.99.240.196 一. 给磁盘做raid 要求&#xff1a; 1. 将两个894G的磁盘做成raid1 2. 将两块14902G的磁盘各自做…

SpringBoot配置类

在Spring Boot中&#xff0c;配置类是一种特殊的类&#xff0c;用于定义和配置Spring应用程序的各种组件、服务和属性。这些配置类通常使用Java注解来声明&#xff0c;并且可以通过Spring的依赖注入机制来管理和使用。 Spring 容器初始化时会加载被Component、Service、Reposi…

SpringBoot教程(二十五) | SpringBoot配置多个数据源

SpringBoot教程&#xff08;二十五&#xff09; | SpringBoot配置多个数据源 前言方式一&#xff1a;使用dynamic-datasource-spring-boot-starter引入maven依赖配置数据源动态切换数据源实战 方式二&#xff1a;使用AbstractRoutingDataSource1. 创建数据源枚举类2. 创建数据源…

ZooKeeper单机、集群模式搭建教程

单点配置 ZooKeeper在启动的时候&#xff0c;默认会读取/conf/zoo.cfg配置文件&#xff0c;该文件缺失会报错。因此&#xff0c;我们需要在将容器/conf/挂载出来&#xff0c;在制定的目录下&#xff0c;添加zoo.cfg文件。 zoo.cfg logback.xml 配置文件的信息可以从二进制包…

【大数据学习 | HBASE高级】hbase-phoenix 与二次索引应用

1. hbase-phoenix的应用 1.1 概述&#xff1a; 上面我们学会了hbase的操作和原理&#xff0c;以及外部集成的mr的计算方式&#xff0c;但是我们在使用hbase的时候&#xff0c;有的时候我们要直接操作hbase做部分数据的查询和插入&#xff0c;这种原生的方式操作在工作过程中还…

Python入门(7)--高级函数特性详解

Python高级函数特性详解 &#x1f680; 目录 匿名函数&#xff08;Lambda&#xff09;装饰器的使用生成器与迭代器递归函数应用实战案例&#xff1a;文件批处理工具 1. 匿名函数&#xff08;Lambda&#xff09;深入解析 &#x1f3af; 1.1 Lambda函数基础与进阶 1.1.1 基本…

【环境配置】GPU - 加速深度学习

版本对应关系Previous PyTorch Versions | PyTorch 这里具体讨论需要使用GPU时的环境配置。Pytorch 和 torchvision 等框架可以利用 CUDA 和 cuDNN 提供的 GPU 加速功能,高效地处理大规模的深度学习任务,如计算机视觉中的图像分类、目标检测等任务。 1. NVIDIA 显卡硬件条件…

拆解测试显示Mac Mini (2024)固态硬盘并未锁定 互换硬盘后仍可使用

此前已经有维修达人尝试将 Mac Mini (2024) 固态硬盘上的 NAND 闪存拆下并替换实现扩容&#xff0c;例如可以从 256GB 扩容到 2TB。虽然接口类似于 NVMe M.2 SSD 但直接安装普通硬盘是无效的&#xff0c;苹果仍然通过某种机制检测硬盘是否能够兼容。 不过知名拆解网站 iFixit 的…

微服务中的技术使用与搭配:如何选择合适的工具构建高效的微服务架构

一、微服务架构中的关键技术 微服务架构涉及的技术非常广泛&#xff0c;涵盖了开发、部署、监控、安全等各个方面。以下是微服务架构中常用的一些技术及其作用&#xff1a; 1. 服务注册与发现 微服务架构的一个重要特性是各个服务是独立部署的&#xff0c;因此它们的地址&am…

STM32学习笔记之__attribute__

在STM32当中&#xff0c;运用__attribute__主要是确认把什么数据放置在什么地址上 举例&#xff1a; uint32_t g_test_buffer[250000] __attribute__((at(SRAM_BASE_ADDR))); 把g_test_buffer数组的数据放在SRAM_BASE_ADDR地址上。 参考&#xff1a;STM32学习笔记之__attrib…

Qt / Qt Quick程序打包的一些坑 (四)

【写在前面】 打包方法见 Qt / Qt Quick程序打包的方法。 这里是再次记录一些坑。 【正文开始】 直接进入正题&#xff1a; 在 Qt5 中&#xff0c;如果我们的 Qml 中使用了【Qt Shapes】模块&#xff0c;那么在打包的时候&#xff0c;会缺少Qt5QuickShapes.dll。 然后&#xff…