I need help creating an animation that makes a div slide out when the mouse hovers over it, and stay out until the mouse moves away. I'm new to React so any guidance would be appreciated. Here is my code snippet:
return (
<div id="homeDiv">
<div>
<Navbar />
</div>
<div className="portStyle">
</div>
<div className="cvStyle1">
</div>
<div className="nameStyle">
<h1 >Lin</h1>
<h1 >Edmund</h1>
</div>
</div>
)
And here's the related CSS:
#homeDiv {
overflow-y: hidden;
overflow-x:hidden;
}
.nameStyle {
height: 100vh;
width: 30%;
display: flex;
justify-content: flex-end;
flex-direction: column;
}
.portStyle {
height: 100vh;
width: 20%;
position: relative;
float: right;
background-color: #000;
}
.cvStyle1 {
height: 100vh;
width: 20%;
position: relative;
float: right;
background-color: #ccc;
}I'm unsure whether to use CSS animations or React animations for this task. Since CSS does not directly support onMouseOver events, I'm wondering if there's a workaround. The Navbar element is simply a navigation bar aligned to the right of the screen with 20% width and 100vh height.