React+CSS实现：悬停头像显示的下拉框，移至下拉框时保持显示

问题出在你的CSS hover逻辑：当下拉框采用绝对定位时，它不在.imageContainer的文档流范围内，鼠标移到下拉框上时，.imageContainer的hover状态会中断，导致下拉框提前消失，无法正常点击链接。

下面提供两种解决方法：

方法一：纯CSS修改 #

只需调整hover触发条件，同时给父容器添加相对定位：

1. 给.imageContainer添加相对定位，确保下拉框相对于它定位：

.imageContainer {
  position: relative;
  cursor: pointer; /* 可选，提示该区域可交互 */
}

2. 修改hover规则，让下拉框在父容器hover或自身hover时都保持显示：

/* 替换原来的.imageContainer:hover > .profile_info_iner */
.imageContainer:hover > .profile_info_iner,
.profile_info_iner:hover {
  opacity: 1;
  visibility: visible;
  top: 77px;
}

这样鼠标从父容器移到下拉框时，下拉框的hover状态会维持它的显示，就能正常点击链接了。

方法二：React状态控制（更灵活） #

用React的useState管理下拉框的显示状态，通过鼠标事件精准控制：

import { useState } from 'react';

function ProfileDropdown() {
  const [isDropdownOpen, setIsDropdownOpen] = useState(false);

  return (
    <div 
      className="imageContainer"
      onMouseEnter={() => setIsDropdownOpen(true)}
      onMouseLeave={() => setIsDropdownOpen(false)}
      style={{ position: 'relative', cursor: 'pointer' }}
    >
      <img
        src="http://www.aksisweb.com/theme/fixed/layouts-1/assets/img/avtar-2.png"
        alt="Profile"
      />
      <div 
        className="profile_info_iner"
        onMouseEnter={() => setIsDropdownOpen(true)}
        onMouseLeave={() => setIsDropdownOpen(false)}
        style={{
          opacity: isDropdownOpen ? 1 : 0,
          visibility: isDropdownOpen ? 'visible' : 'hidden',
          top: '77px'
        }}
      >
        <div className="profile_author_name">
          <p>Admin</p>
          <h5>Adugna Tadesse</h5>
        </div>
        <div className="profile_info_details">
          <a href="#">My Profile</a>
          <a href="#">Settings</a>
          <a href="#">Log Out</a>
        </div>
      </div>
    </div>
  );
}

对应的CSS可去掉原有的hover规则，保留基础样式即可：

.profile_info_iner {
  position: absolute;
  right: 0;
  background-color: #fff;
  text-align: left;
  width: 215px;
  padding: 0;
  opacity: 0;
  font-family: "Nunito", sans-serif;
  visibility: hidden;
  top: 77px;
  transition: 0.5s;
  border-radius: 15px;
  z-index: 20;
}
.profile_info_iner::before {
  position: absolute;
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  top: -10px;
  right: 15px;
  border-width: 0 11px 12px;
  border-color: transparent transparent #567aed transparent;
  z-index: 19;
}

这种方法扩展性更强，后续可轻松添加点击外部关闭下拉框等功能。

内容的提问来源于stack exchange，提问作者Adugna Tadesse