How to change an Element's Style on Hover in React

# Table of Contents

1. Style an element on Hover using an external CSS file
2. Style an element on Hover using inline CSS styles
3. Style an element on Hover using Classes in React

# Style an element on Hover using an external CSS file

To style an element on hover using an external CSS file:

1. Define a class with the :hover pseudo-class in a CSS file.
2. Import your .css file into your React component.
3. Add the class to an element in your JSX code.

Copied!
import './App.css';

const App = () => {
  return (
    <div>
      <div className="box">
        <p>bobbyhadz.com</p>
      </div>
    </div>
  );
};

export default App;

And here is the related App.css file.

Copied!
.box {
  width: 120px;
  height: 60px;
  background-color: yellow;
  color: black;
  padding: 12px;
}

.box:hover {
  background-color: black;
  color: white;
}

Make sure to import the App.css file as shown in the code sample.

We used the :hover pseudo-class to add styling to an element when the user hovers over the element.

Copied!
<div className="box">
  <p>bobbyhadz.com</p>
</div>

We added the class to a div, so every time the user hovers over the div, the styles get applied.

If you need to show an element or text on hover, click on the link and follow the instructions.

# Style an element on Hover using inline CSS styles

To add inline CSS styles on hover in React:

1. Set the onMouseEnter and onMouseLeave props on the element.
2. When the user hovers over or out of the element, update a state variable.
3. Conditionally set inline styles on the element.

Copied!
import {useState} from 'react';

const App = () => {
  const [isHovering, setIsHovering] = useState(false);

  const handleMouseEnter = () => {
    setIsHovering(true);
  };

  const handleMouseLeave = () => {
    setIsHovering(false);
  };

  return (
    <div>
      <div>
        <div
          style={{
            width: '140px',
            height: '60px',
            padding: '20px',
            backgroundColor: isHovering ? 'green' : 'blue',
            color: isHovering ? 'white' : 'red',
          }}
          onMouseEnter={handleMouseEnter}
          onMouseLeave={handleMouseLeave}
        >
          bobbyhadz.com
        </div>
      </div>
    </div>
  );
};

export default App;

We used the useState hook to keep track of the isHovering state variable.

Copied!
const [isHovering, setIsHovering] = useState(false);

The hook returns an array containing a value and a function that is used to set update the value.

We set the onMouseEnter and onMouseLeave props on a div element.

The mouseenter event is triggered when the user's mouse is moved within the element.

Conversely, the mouseleave event is triggered when the user's mouse is moved out of the element.

Every time the user hovers over the div, the handleMouseEnter function is invoked.

Copied!
const handleMouseEnter = () => {
  setIsHovering(true);
};

And every time they move their cursor out of the element, the handleMouseLeave function is invoked.

Copied!
const handleMouseLeave = () => {
  setIsHovering(false);
};

We can then use the ternary operator to set inline styles on the element conditionally.

Copied!
<div
  style={{
    backgroundColor: isHovering ? 'green' : 'blue',
    color: isHovering ? 'white' : 'red',
  }}
  onMouseEnter={handleMouseEnter}
  onMouseLeave={handleMouseLeave}
>
  bobbyhadz.com
</div>

The ternary operator is very similar to an if/else statement.

You can imagine that the value before the colon is the if block and the value after the colon is the else block.

Copied!
<div
  style={{
    backgroundColor: isHovering ? 'green' : 'blue',
    color: isHovering ? 'white' : 'red',
  }}
  onMouseEnter={handleMouseEnter}
  onMouseLeave={handleMouseLeave}
>
  bobbyhadz.com
</div>

In other words, if the isHovering variable stores a true value, we set the backgroundColor property to green, otherwise we set it to blue.

If you only need to set a style when the user is hovering over the element, use an empty string for the falsy case.

Copied!
<div
  style={{
    backgroundColor: isHovering ? 'green' : '',
    color: isHovering ? 'white' : '',
  }}
  onMouseEnter={handleMouseEnter}
  onMouseLeave={handleMouseLeave}
>
  bobbyhadz.com
</div>

If the isHovering variable is equal to true, the backgroundColor property gets set to green, otherwise, it remains the default of an empty string.

When the user hovers over the element:

1. The handleMouseEnter function is invoked.
2. The isHovering state variable is set to true.
3. We conditionally set inline styles on the element.

Conversely, when the user moves their cursor out of the element:

1. The handleMouseLeave function is invoked.
2. The isHovering state variable is set to false.
3. We revert the element's styles.

I've also written a detailed guide on how to change the style on an element on click.

# Style an element on Hover using Classes in React

You can also conditionally style an element on hover using classes.

Copied!
import './App.css';

import {useState} from 'react';

const App = () => {
  const [isHovering, setIsHovering] = useState(false);

  const handleMouseOver = () => {
    setIsHovering(true);
  };

  const handleMouseOut = () => {
    setIsHovering(false);
  };

  return (
    <div>
      <div>
        <div
          className={isHovering ? 'bg-salmon' : ''}
          onMouseOver={handleMouseOver}
          onMouseOut={handleMouseOut}
        >
          Hover me
        </div>
      </div>
    </div>
  );
};

export default App;

And here is the App.css file for the example.

Copied!
.bg-salmon {
  background-color: salmon;
  color: white;
}

We set the onMouseOver prop on the div element, so every time the user hovers over the element, the handleMouseOver function is invoked.

Copied!
<div
  className={isHovering ? 'bg-salmon' : ''}
  onMouseOver={handleMouseOver}
  onMouseOut={handleMouseOut}
>
  Hover me
</div>

The mouseover event is triggered when the user moves their cursor onto the element or one of its child elements.

In our handleMouseOver function, we simply set the isHovering state variable to true.

Copied!
const handleMouseOver = () => {
  setIsHovering(true);
};

Conversely, in our handleMouseOut function, we set the state variable to false.

Copied!
const handleMouseOut = () => {
  setIsHovering(false);
};

The mouseout event is triggered when the user's cursor is no longer contained within the element or one of its children.

We used the ternary operator to conditionally add the class to the element.

Copied!
<div
  className={isHovering ? 'bg-salmon' : ''}
  onMouseOver={handleMouseOver}
  onMouseOut={handleMouseOut}
>
  Hover me
</div>

The ternary operator is very similar to an if/else statement.

If the expression to the left of the question mark is truthy, the operator returns the value to the left of the colon, otherwise, the value to the right of the colon is returned.

In other words, if the isHovering variable stores a true value, we add the bg-salmon class to the element, otherwise return an empty string.

You can imagine that the value before the colon is the if block and the value after the colon is the else block.

If you need to add or remove a class on click, check out the following tutorial.

I also have an article on how to use a ref to change an element's style.

# Additional Resources

You can learn more about the related topics by checking out the following tutorials:

• Using the calc() function in inline styles in React
• Style the border and border-radius CSS properties in React
• How to cross out (Strikethrough) Text in React
• Setting a global font family in React
• Applying global CSS styles in a React app
• Setting a background image with inline Styles in React
• How to add whitespace between JSX elements in React.js
• How to generate unique IDs in React.js [3 Ways]