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;
  }
}
相关推荐
brzhang3 小时前
我操,终于有人把 AI 大佬们 PUA 程序员的套路给讲明白了!
前端·后端·架构
止观止4 小时前
React虚拟DOM的进化之路
前端·react.js·前端框架·reactjs·react
goms4 小时前
前端项目集成lint-staged
前端·vue·lint-staged
谢尔登4 小时前
【React Natve】NetworkError 和 TouchableOpacity 组件
前端·react.js·前端框架
Lin Hsüeh-ch'in4 小时前
如何彻底禁用 Chrome 自动更新
前端·chrome
augenstern4166 小时前
HTML面试题
前端·html
张可6 小时前
一个KMP/CMP项目的组织结构和集成方式
android·前端·kotlin
G等你下课7 小时前
React 路由懒加载入门:提升首屏性能的第一步
前端·react.js·前端框架
谢尔登7 小时前
【React Native】ScrollView 和 FlatList 组件
javascript·react native·react.js
蓝婷儿8 小时前
每天一个前端小知识 Day 27 - WebGL / WebGPU 数据可视化引擎设计与实践
前端·信息可视化·webgl