Javascript 指针事件或鼠标悬停在React中的图像遮罩上

我有一个带有图像掩码的容器和带有onMouseOver事件和悬停样式的子容器

任何指针事件都不能通过掩码工作，它们在内容不可见的掩码外部工作。另一种方法是，在可见部分获取指针事件，在不可见的非屏蔽部分忽略它们

我尝试在容器上设置指针事件：无，在子容器上设置指针事件：自动，但这不起作用

这是我的手写笔文件

.container {    
  width 100%
  position absolute
  height 100%    
  pointer-events none    
  mask-image: url('../../images/mask.svg')
  mask-size 600px auto    
  mask-repeat: no-repeat
  .turns {
    position absolute
    pointer-events auto
    &:hover{
       ...
    }
  } 
}

这有什么办法吗？我不介意是否必须使用javascript，或者以不同的方式应用掩码

多谢各位

编辑：

本教程结束后，我将尝试以下方法：

<svg width="500" height="500" viewBox="0 0 500 500">
      <clipPath id="clip-path">
        <path d="M22.154,108.389 L258.274,13.5 L449.156,151.421 L487.774,429.469 L211.933,472.5 L30.981,366.577 L22.154,108.389 z"/>
      </clipPath>
      <div
        style={{
            width: `600px`,
            height: `600px`,
            background: `blue`,          
          }}
        clip-path="url(#clip-path)"
      />
</svg>

---

但是这个div甚至都不可见。

你有没有试着玩弄z索引？@Winston我没有，但我不知道这是否会有区别，因为两个div都嵌套在一起