React中利用CSS实现鼠标悬停显示下拉菜单并保持可见性

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

const Header = () => {
  const [signMenu, setSignMenu] = useState(false); // 控制SignInMenu的显示状态

  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/> : <></>} {/* 根据状态渲染SignInMenu */}
          </div>
        </div>
      </div>
    </header>
  );
};

export default Header;

// SignInMenu.js
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.js (简化后的版本)
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}> {/* 移除 onMouseEnter/onMouseLeave */}
            <p>
              <span>Sign In</span>
              <span>Join Free</span>
            </p>
            <SignInMenu/> {/* SignInMenu 始终渲染，通过CSS控制显示/隐藏 */}
          </div>
        </div>
      </div>
    </header>
  );
};

export default Header;

/* Header.module.css 或相关全局样式 */
.create_account {
  display: flex;
  align-items: center;
  position: relative; /* 确保子元素的绝对定位参照此父元素 */
  /* 其他样式... */
}

/* SignInMenu.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; /* 相对于 .create_account 定位 */
  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, .join_in {
  width: 100%;
  padding: 5px 0;
  margin: 10px 0;
  border-radius: 20px;
  text-align: center;
  text-decoration: none;
}
.sign_in {
  color: #fff;
  background-color: var(--orange-color);
}
.join_in {
  color: var(--orange-color);
  border: 1px solid var(--orange-color);
}