JIYIK CN >

Show element or text on hover in React:

1. onMouseOverSet the and attributes on the element onMouseOut.
2. Track whether the user is hovering over an element in a state variable.
3. Conditionally render another element based on a state variable.

import {useState} from 'react';

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

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

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

  return (
    <div>
      <div>
        <div
          onMouseOver={handleMouseOver}
          onMouseOut={handleMouseOut}
        >
          Hover over me
        </div>

        {isHovering && (
          <div>
            <h2>Only visible when hovering div</h2>
            <h2>jiyik.com</h2>
          </div>
        )}
      </div>
    </div>
  );
};

export default App;

Code example showing how to display one element when you hover over another element.

We set onMouseOverthe property on the div element, so every time the user hovers over the element, handleMouseOverthe function will be called.

<div
  onMouseOver={handleMouseOver}
  onMouseOut={handleMouseOut}
>
  Hover over me
</div>

The event is fired when the user moves the cursor over the element or one of its child elements mouseover.

In our handleMouseOverfunction, we simply isHoveringset the state variable to true .

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

Instead, in our handleMouseOutfunction, we set the state variable to false .

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

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

We use the logical AND &&operator to conditionally render another div element.

The logical AND &&operator returns the value on the left if it is false, otherwise it returns the value on the right.

If the state variable stores a false value, the logical AND &&operator will return false and nothing will be rendered.

Ignore boolean values, null and undefined. They are not rendered at all.

When the user hovers over the div element:

1. The handleMouseOver function is called.
2. The isHovering state variable is set to true.
3. Another div element is rendered.

Conversely, when the user moves the cursor outside the div element:

1. The handleMouseOut function is called.
2. The isHovering state variable is set to false.
3. The other div element is no longer displayed.

Show component on hover in React

The same method can be used to show a component when you hover over another element.

import {useState} from 'react';

function Heading() {
  return (
    <div>
      <h2>jiyik.com</h2>
    </div>
  );
}

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

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

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

  return (
    <div>
      <div>
        <div
          onMouseOver={handleMouseOver}
          onMouseOut={handleMouseOut}
        >
          Hover over me
        </div>

        {isHovering && <Heading />}
      </div>
    </div>
  );
};

export default App;

divThe code example shows a component when we hover over the element.

We extract a divand a h2into the Heading component.

The Heading component will be displayed every time the user hovers over the div with the onMouseOverand onMouseOutproperties set .

When the user moves the mouse out of the div, the Heading component unmounts and is no longer rendered.