JIYIK CN >

To show a hover element 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 other elements based on state variables.

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>
          </div>
        )}
      </div>
    </div>
  );
};

export default App;

We set the onMouseOver property on the div element, so every time the user hovers the mouse over this element, the handleMouseOver function will be called.

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

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

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

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

We use logical AND (&&)operators 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 returns false and nothing is rendered.

Boolean values, null and undefined are ignored. They are not rendered at all.

When the user hovers over the div element:

1. Call handleMouseOverthe function.
2. isHoveringThe status variable is set to true .
3. Another div element is rendered.

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

1. Call handleMouseOutthe function.
2. isHoveringThe status variable is set to false .
3. The other div element is no longer displayed.