在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 */}
            {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;

/* Header.module.css 或全局样式 */

/* 定义下拉菜单的初始隐藏状态 */
.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; /* 确保箭头在下拉菜单下方 */
}

/* 其他相关样式 */
.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; /* 确保下拉菜单可以相对于此元素定位 */
}
.user_icon {
  font-size: 28px;
  margin-right: 5px;
}
.create_account > p > span {
  display: block;
  font-size: 12px;
}

/* SignInMenu.module.css */
.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 = () => {
  // 移除 signMenu 状态和相关事件处理器

  return (
    <header className={classes.header}>
      <div className={classes.container}>
        <div
          className={classes.create_account}
          // 移除 onMouseEnter={() => setSignMenu(true)}
          // 移除 onMouseLeave={() => setSignMenu(false)}
        >
          <p>
            <span>Sign In</span>
            <span>Join Free</span>
          </p>
          {/* SignInMenu 始终渲染，但由CSS控制其可见性 */}
          <SignInMenu /> 
        </div>
      </div>
    </header>
  );
};

export default Header;