How to add inline CSS styles on Hover in React

The topic of this article will be how to add inline CSS styles on Hover in React. Some of the ways you will know after reading the article like using onMouseEnter-onMouseLeave or using the onMouseOver-onMouseOut method.

Add inline CSS styles on Hover in React

Using onMouseEnter-onMouseLeave 

The mouse enter event is very similar to the mouseover event in JavaScript. The difference between them is that the mouseover event is bubbling, resulting in different event handling in the case of a parent element containing a child element. 

The program will catch this event when you move the mouse over the element, combined with the onMouseLeave event, to have a complete hover.

When the mouse pointer moves away from an element while positioned on top, the JavaScript mouseleave event is triggered. In JavaScript, this event occurs on Element Objects.

Code:

import { useState } from "react";

const App = () => {
    const [boxStyle, setBoxStyle] = useState({});

    const handleMouseEnter = () => {
        setBoxStyle({ color: "white", backgroundColor: "black" });
    };

    const handleMouseLeave = () => {
        setBoxStyle({});
    };

    return (
        <div>
            <button
                style={boxStyle}
                onMouseEnter={handleMouseEnter}
                onMouseLeave={handleMouseLeave}
            >
                Hover here
            </button>
        </div>
    );
};

export default App;

Output:

We will associate with a state containing the inline style of the element. When the onMouseEnter event is set, the value will be set to the style we want to pass. And when you leave the mouse, the state will reset to empty to return the original element style. We can add inline CSS styles on hover in React.

Using onMouseOver-onMouseOut method

The event pair is almost identical to the one we used in the above method. When substituting for the element, we also get an exclusive hover event. However, the difference between these events is that while the onMouseOver event occurs when a mouse event occurs on an element when it is passed, it only occurs when the mouse moves from outside this element to this element.

The difference is the same for the onMouseOut and onMouseLeave events, so we can first replace these two events.

Code:

import { useState } from "react";

const App = () => {

    const [boxStyle, setBoxStyle] = useState({});

    const handleMouseOver = () => {
        setBoxStyle({ color: "white", backgroundColor: "black" });
    };

    const handleMouseOut = () => {
        setBoxStyle({});
    };

    return (
        <div>
            <button
                style={boxStyle}
                onMouseOver={handleMouseOver}
                onMouseOut={handleMouseOut}
            >
                Hover here
            </button>
        </div>
    );
};

export default App;

The return results of these two methods are similar if you only set the event for a tag that does not contain child tags inside. Wish you success with the methods mentioned in the article

Summary

In summary, the article answered the question of how to add inline CSS styles on hover in React. You can flexibly use two pairs of events, onMouseEnter-onMouseLeave or onMouseOver-onMouseOut.

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