React中实现鼠标悬停显示下拉菜单并保持可见性的最佳实践

import React, { useState } from "react";
import classes from "./Header.module.css";
import SignInMenu from "../signin/SignInMenu";

const Header = () => {
  const [signMenu, setSignMenu] = useState(false);

  return (
    <header className={classes.header}>
      <div className={classes.container}>
        <div className={classes.header_options}>
          <div
            className={classes.create_account}
            onMouseEnter={() => setSignMenu(true)}
            onMouseLeave={() => setSignMenu(false)}
          >
            <p>
              <span>Sign In</span>
              <span>Join Free</span>
            </p>
            {signMenu ? <SignInMenu/> : <></>}
          </div>
        </div>
      </div>
    </header>
  );
};

export default Header;

import React from 'react';
import classes from './SignInMenu.module.css';
import { Link } from 'react-router-dom';

const SignInMenu = () => {
  return (
    <div className={classes.account_dropdown}>
      <div className={classes.top}>
        <p>Welcome back!</p>
        <Link className={classes.sign_in} to='/signin'>Sign In</Link>
        <Link className={classes.join_in} to='/join'>Join Free</Link>
      </div>
    </div>
  )
}

export default SignInMenu;

.account_dropdown {
  display: none; /* 默认隐藏 */
  width: 250px;
  height: 400px;
  padding: 10px;
  background-color: #fff;
  box-shadow: 1px 1px 4px -1px rgb(0 0 0 / 40%);
  border-radius: 5px;
  font-size: 14px;
  position: absolute;
  top: 40px;
  right: 8%;
  z-index: 10; /* 确保下拉菜单在其他内容之上 */
}

/* 当父容器 .create_account 被悬停时，显示 .account_dropdown */
.create_account:hover .account_dropdown {
  display: block;
}

.account_dropdown::before {
  content: '';
  width: 15px;
  height: 15px;
  background-color: #fff;
  box-shadow: 1px 1px 4px -1px rgb(0 0 0 / 40%);
  position: absolute;
  top: -7px;
  right: 8%;
  transform: rotate(45deg);
  z-index: -1;
}
.top {
  display: flex;
  flex-direction: column;
}
.sign_in {
  width: 100%;
  padding: 5px 0;
  margin: 10px 0;
  color: #fff;
  background-color: var(--orange-color);
  border-radius: 20px;
  text-align: center;
  text-decoration: none;
}
.join_in {
  width: 100%;
  padding: 5px 0;
  color: var(--orange-color);
  border: 1px solid var(--orange-color);
  border-radius: 20px;
  text-align: center;
  text-decoration: none;
}

import React from "react"; // 不再需要 useState
import classes from "./Header.module.css";
import SignInMenu from "../signin/SignInMenu";

const Header = () => {
  return (
    <header className={classes.header}>
      <div className={classes.container}>
        <div className={classes.header_options}>
          <div className={classes.create_account}>
            <p>
              <span>Sign In</span>
              <span>Join Free</span>
            </p>
            {/* SignInMenu 总是渲染，由CSS控制显示/隐藏 */}
            <SignInMenu/>
          </div>
        </div>
      </div>
    </header>
  );
};

export default Header;

.header {
  width: 100%;
  height: 120px;
}
.container {
  width: 100%;
  height: auto;
  max-width: 1440px;
  margin: 0 auto;
  padding: 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.header_options {
  display: flex;
  align-items: center;
  justify-content: center;
}
.create_account {
  display: flex;
  align-items: center;
  position: relative; /* 关键：使绝对定位的 .account_dropdown 相对于它定位 */
}
.user_icon {
  font-size: 28px;
  margin-right: 5px;
}
.create_account > p > span {
  display: block;
  font-size: 12px;
}