Javascript CSS重叠元素阻止图像悬停

我正在构建一个显示cat 的图像的网页，我想在每个图像上添加一个评级系统，允许用户喜欢cat .当用户将鼠标悬停在图像上时，我可以显示分级系统，但分级系统挡住了图像的一部分，所以当我将鼠标悬停在该部分上时，图像悬停效果不会被记录下来.

我曾try 将评级系统中的指针事件属性设置为无，但之后无法点击评级系统中的心形图标.当我将指针事件设置为All时，阻塞图像问题又回来了.

以下是我为一张cat 图片编写的当前代码:

import React, { useState } from "react";
import "./App.css";

export default function App() {
  const [isHovered, setIsHovered] = useState(false);
  const [isLiked, setIsLiked] = useState(false);
  const catUrl = "https://placekitten.com/300/300";

  return (
    <div className="image-container">
      <img
        src={catUrl}
        alt="img"
        className="img"
        onMouseOver={() => setIsHovered(true)}
        onMouseOut={() => setIsHovered(false)}
      />
      <div className={isHovered ? "rate show" : "rate"}>
        <img
          src={
            !isLiked
              ? "https://i.ibb.co/MMBpKMV/heart-2.png"
              : "https://i.ibb.co/BV2CwZK/heart-1.png"
          }
          alt="heart-2"
          border="0"
          className="heart-icon"
          onClick={() => setIsLiked(true)}
        />
      </div>
    </div>
  );
}

.img {
  width: 300px;
  height: 300px;
  position: relative;
}

.rate {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 20%;
  background-color: rgba(255, 255, 255, 0.9);
  display: none;
  justify-content: center;
  align-items: center;
  pointer-events: none;
}

.show {
  display: flex;
}

.heart-icon {
  width: 30px;
  height: 30px;
  cursor: pointer;
  pointer-events: all;
}

.image-container {
  position: relative;
  width:fit-content
}

如有任何帮助，将不胜感激！