[英]I want to display a div when user hover over a sign in element but div should be displayed when user moves the mouse to that div other in ReactJS
I'm new to react and I'm building alibaba.com clone.我是新手,我正在构建 alibaba.com 克隆。 I want to display a div when user hover over a div with the classname of create_account, I've tried onMouseEnter and onMouseLeave on that element but the div's closed when I move the mouse outside of the sign in element.当用户将鼠标悬停在类名为 create_account 的 div 上时,我想显示一个 div,我在该元素上尝试了 onMouseEnter 和 onMouseLeave,但是当我将鼠标移到登录元素之外时,该 div 关闭了。 How can I display that component when I move to that element移动到该元素时如何显示该组件
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;
this is for the main styles这是主要样式
.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;
}
this is the component I want to show这是我要展示的组件
import React, { useState } 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
this is the styles for the sign in menu div这是登录菜单 div 的样式
.account_dropdown {
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%;
}
.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;
}
You can use css to do it.你可以使用css来做到这一点。
.create_account:hover .account_dropdown {
display: block;
}
.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%;
}
and also remove onMouseEnter, onMouseLeave并删除 onMouseEnter、onMouseLeave
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.