How to show text when hovering over an Element in React

This article will show you how to show text when hovering over an Element in React. Some of the ways are mentioned in the article, such as using the onMouseOver-onMouseOut and onMouseEnter-onMouseLeave methods.

Show text when hovering over an Element in React

The hover event means that when you hover the mouse on a certain html tag, the hover event will immediately occur. For example, if you want when the user hovers the mouse over the menu, a slow and smooth menu drop-down effect instead of being displayed immediately like CSS, then you have to use javascript.

Using onMouseOver-onMouseOut method

In React, we don’t have a hover event, so we can use event pairs to simulate this. In this way, we use onMouseOver and onMouseOut. Onmouseover is an event in Javascript. The onMouseover event occurs when the mouse pointer is moved to an element or one of its children. Otherwise, the object’s onMouseOut event will be fired when we move the mouse away from the object.

Code:

import { useState } from "react";

const App = () => {
    const [isVisible, setIsVisible] = useState("");

    return (
        <>
            <h2>LearnShareIT</h2>
            <hr />
            <div
                style={{ cursor: "pointer" }}
                onMouseOver={() => setIsVisible(true)}
                onMouseOut={() => setIsVisible(false)}
            >
                <h2>Hover to show text</h2>
            </div>
            {isVisible ? <h3>Text</h3> : null}
        </>
    );
};

export default App;

Output:

As you can see in the above code, we use an isVisible state to store the hidden value, showing the text h2. When we trigger the onMouseOut event, the state will change to true and false if it is the onMouseOut event. We use the ternary operator to check the state and show the <h2> tag containing the text to show. Or you can refer to another method in the next part of the article.

Using onMouseEnter-onMouseLeave method

The onMouseEnter event in JavaScript occurs when the mouse pointer is moved over an element. This event occurs on Element Objects in JavaScript. Combined with the onMouseLeave event that occurs when the mouse pointer is moved away from the element. We can use this event pair to replace the event pair in the above method to get the same result. Please take a look at the code below to understand how it works.

Code:

import { useState } from "react";

const App = () => {
    const [isVisible, setIsVisible] = useState("");

    return (
        <>
            <h2>LearnShareIT</h2>
            <hr />
            <div
                style={{ cursor: "pointer" }}
                onMouseEnter={() => setIsVisible(true)}
                onMouseLeave={() => setIsVisible(false)}
            >
                <h2>Hover to show text</h2>
            </div>
            {isVisible ? <h3>Text</h3> : null}
        </>
    );
};

export default App;

When we hover on the ‘hover-me’ div tag, the h3 tag containing the text to show will be rendered to the screen. Wish you success with the methods mentioned in the article.

Summary

In summary, the article has shown you how to show text when hovering over an element in React. However, you should use the onMouseEnter-onMouseLeave method because the onMouseOver event can cause a bubble event if you don’t understand it.

Nathaniel Kirk

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