最终效果：
实现原理：
- 移动到图片上的时候，给img加一个伪类
！！此时就要地方要注意了，因为img标签是闭合的标签，无法直接添加 伪类（::after），所以
我是在img外层加了一个span标签，方便加上伪类，实现浮层的效果 - 给元素绑定对应的点击事件
废话不多说，上代码！！！！
// 鼠标移动到图片时，将图片包裹在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;}
}
