鼠标悬停图片显示div后，无法点击div内按钮的问题求助

问题原因 #

你当前的实现应该是将hover事件仅绑定在了<img>元素上，当鼠标从图片移到informations div区域时，会触发图片的mouseleave事件，导致div被隐藏，进而无法完成按钮点击操作。

方案1：纯CSS实现（推荐，更简洁） #

通过父容器的hover状态控制子元素的显示，只要鼠标处于父容器.Popular的范围内（包括图片和informations div），就保持div显示。

步骤1：添加CSS样式

.Popular {
  position: relative; /* 为子元素的绝对定位提供参考 */
  width: fit-content;
  height: fit-content;
}

.informations {
  position: absolute;
  top: 0;
  left: 0;
  display: none; /* 默认隐藏 */
  /* 自定义样式示例 */
  background-color: rgba(0,0,0,0.8);
  color: white;
  padding: 10px;
}

/* 父容器hover时显示informations */
.Popular:hover .informations {
  display: block;
}

步骤2：React代码无需修改hover相关逻辑

你原有JSX代码保持不变，CSS会自动处理显示/隐藏逻辑。

方案2：React状态控制 #

如果需要用JS逻辑控制显示状态，将鼠标事件绑定在父容器.Popular上，而非单独绑定在图片上。

代码示例

import { useState } from 'react';
// 导入你的图标组件：BsFillPlayCircleFill、FiPlusCircle等

function YourComponent() {
  // 其他业务逻辑...

  return (
    {/* 遍历渲染子项 */}
    {yourItemsArray.map((items, key) => {
      const [showInfo, setShowInfo] = useState(false);
      return (
        <div 
          className='Popular' 
          key={key} 
          ref={singleMovieRef}
          onMouseEnter={() => setShowInfo(true)}
          onMouseLeave={() => setShowInfo(false)}
        >
          <img src={`https://image.tmdb.org/t/p/original${items.poster_path}`} />
          <div 
            className='informations' 
            style={{ display: showInfo ? 'block' : 'none' }}
          >
            <div className='infoButton'>
              <div className='leftButton'>
                <BsFillPlayCircleFill className='playButton'/>
                <FiPlusCircle />
                <AiFillLike />
                <AiFillDislike />
              </div>
              <div className='rightButton'>
                <FaCircleChevronDown />
              </div>
            </div>
            <div className='titleAndOther'>
              {titleShow(items)}
              <p className='rating'>Rating: {items.vote_average}</p>
              <p className='type'>Genre: {items.media_type}</p>
            </div>
          </div>
        </div>
      );
    })}
  );
}

注意事项 #

• 若使用CSS方案，确保.Popular容器的尺寸能覆盖图片和informations div的范围，避免鼠标移到div上时父容器的hover状态失效。
• 若使用状态控制方案，需将useState放在循环内部，确保每个子项拥有独立的显示状态。

内容的提问来源于stack exchange，提问作者Bishek Karki