If you don’t know how to show an element on Hover in React, don’t worry. We will give you some solutions in this article. Read on it.
Show an element on Hover in React
Hover is considered a primary effect, an effect that when hovering, the mouse will have the properties you have set up to make your website as dynamic as possible with CSS.
You can apply this hover effect to everything you think you’ll hover over when you see it on your site. For example, menu, background, section, div, button…
Use the onMouseEnter and onMouseLeave event method
This way, we will use two events, onMouseEnter and onMouseLeave, to simulate the hover event. In this way, we can write detailed effects for each event when the mouse hovers over the element and when it leaves.
Code:
import React, { useState } from "react";
export default function App() {
const [style, setStyle] = useState({
display: "none",
});
return (
<div className="App">
<h2>Show an Element on Hover in React | LearnShareIT</h2>
<div
style={{ width: "200px", height: "200px", backgroundColor: "red" }}
onMouseEnter={(e) => {
setStyle({
display: "block",
});
}}
onMouseLeave={(e) => {
setStyle({ display: "none" });
}}
>
<button style={style}>Popup button</button>
</div>
</div>
);
}Output:
Please pay attention to the above code and output. I let the default style of the div be red. When there is an onMouseEnter event, it means that when the user’s mouse hovers over the div, the style will change the state style display to block.
And when the onMouseLeave event is fired when the mouse moves away from the div, the style will change back to none.
Use the onMouseOver and onMouseOut event method
In this way, we will use two other events of the element that are onMouseOver and onMouseOut. The difference here is that onMouseEnter occurs when the mouse pointer moves into the element, and onMouseOver will occur when the cursor moves into it and its children.
Code:
import React, { useState } from "react";
export default function App() {
const [style, setStyle] = useState({
display: "none",
});
return (
<div className="App">
<h2>Show an Element on Hover in React | LearnShareIT</h2>
<div
style={{ width: "200px", height: "200px", backgroundColor: "red" }}
onMouseEnter={(e) => {
setStyle({
display: "block",
});
}}
onMouseLeave={(e) => {
setStyle({ display: "none" });
}}
>
<button style={style}>Popup button</button>
</div>
</div>
);
}These methods are relatively similar, but you can apply them in many different cases. Both of the above methods have the same result in the example code. Hope these methods are helpful to you.
Summary
To summarize, there are many ways to show an element on Hover in React. But in this article, we will show you how to do it with react events like using onMouseEnter and onMouseLeave method or using onMouseOver and onMouseOut method. Let’s try these methods to get your desired results!
Maybe you are interested:
- Call multiple functions onClick in React
- Set the default checked value of a Checkbox in React
- Adding Types to Events in React using TypeScript
Hi, my name’s Nathaniel Kirk. I’m interested in learning and sharing knowledge about programming languages. My strengths are C, C++, Python, HTML, CSS, Javascript, and Reactjs. If you have difficulty with them, don’t worry. I’m here to support you.
Name of the university: PTIT
Major: IT
Programming Languages: C, C++, Python, HTML, CSS, Javascript, Reactjs