React图片悬停评分组件阻挡hover事件的解决求助

核心思路 #

把鼠标悬停的触发范围从<img>扩展到父容器.image-container，用CSS伪类:hover直接控制评分组件的显示，同时保留pointer-events的分层设置——既让评分容器不干扰鼠标事件，又保证心形图标可点击。

修改后的代码 #

React组件代码

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

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

  return (
    <div className="image-container">
      <img
        src={catUrl}
        alt="img"
        className="img"
      />
      <div className="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(!isLiked)}
        />
      </div>
    </div>
  );
}

CSS代码

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

.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;
}

.image-container:hover .rate {
  display: flex;
}

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

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

解决原理 #

1. 父容器悬停触发：.image-container:hover覆盖整个容器区域，鼠标移到评分组件上时，父容器依然处于悬停状态，不会导致评分组件突然消失。
2. 分层事件控制：评分容器设为pointer-events: none，不会阻挡下方图片的鼠标事件；心形图标单独设为pointer-events: all，保证点赞功能正常。
3. 简化状态管理：去掉isHovered状态，用CSS伪类直接控制显示，代码更简洁高效。

内容的提问来源于stack exchange，提问作者drippy frippy