react导航栏将其更改为onmouseover，而不是单击

import React, { useState } from 'react';

const NavigationBar = () => {
  const [isHovered, setIsHovered] = useState(false);

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

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

  return (
    <nav>
      <a
        href="#"
        onMouseOver={handleMouseOver}
        onMouseOut={handleMouseOut}
        style={{ textDecoration: isHovered ? 'underline' : 'none' }}
      >
        Home
      </a>
      <a
        href="#"
        onMouseOver={handleMouseOver}
        onMouseOut={handleMouseOut}
        style={{ textDecoration: isHovered ? 'underline' : 'none' }}
      >
        About
      </a>
      <a
        href="#"
        onMouseOver={handleMouseOver}
        onMouseOut={handleMouseOut}
        style={{ textDecoration: isHovered ? 'underline' : 'none' }}
      >
        Contact
      </a>
    </nav>
  );
};

export default NavigationBar;