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

最终效果:

实现原理:

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

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

typescript 复制代码
// 鼠标移动到图片时,将图片包裹在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之前插入wrapper
      wrapper.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;
  }
}
相关推荐
iphone1084 分钟前
一次编码,多端运行:HTML5多终端调用
前端·javascript·html·html5
Thomas游戏开发20 分钟前
Unity3D 文件夹注释工具
前端框架·unity3d·游戏开发
老坛00122 分钟前
2025决策延迟的椭圆算子分析:锐减协同工具的谱间隙优化
前端
老坛00122 分钟前
从记录到预测:2025新一代预算工具如何通过AI实现前瞻性资金管理
前端
今禾25 分钟前
" 当Base64遇上Blob,图像转换不再神秘,让你的网页瞬间变身魔法画布! "
前端·数据可视化
华科云商xiao徐30 分钟前
高性能小型爬虫语言与代码示例
前端·爬虫
十盒半价30 分钟前
深入理解 React useEffect:从基础到实战的全攻略
前端·react.js·trae
攀登的牵牛花31 分钟前
Electron+Vue+Python全栈项目打包实战指南
前端·electron·全栈
iccb101332 分钟前
我是如何实现在线客服系统的极致稳定性与安全性的
前端·javascript·后端
一大树32 分钟前
Vue3祖孙组件通信方法总结
前端·vue.js