React.JS onMouseOver动画失败

function MyComponent() {
  const handleMouseOver = () => {
    // 动画逻辑
  };

  return <div onMouseOver={handleMouseOver}>Hover over me</div>;
}

import React, { useState } from 'react';

function AnimatedComponent() {
  const [isHovered, setIsHovered] = useState(false);

  const handleMouseOver = () => setIsHovered(true);
  const handleMouseOut = () => setIsHovered(false);

  return (
    <div
      onMouseOver={handleMouseOver}
      onMouseOut={handleMouseOut}
      style={{ opacity: isHovered ? 0.5 : 1 }}
    >
      Hover over me
    </div>
  );
}

.hover-effect {
  transition: opacity 0.3s ease-in-out;
}

.hover-effect:hover {
  opacity: 0.5;
}

<div className="hover-effect">Hover over me</div>

import React, { useState } from 'react';
import './AnimatedComponent.css';

function AnimatedComponent() {
  const [isHovered, setIsHovered] = useState(false);

  const handleMouseOver = () => setIsHovered(true);
  const handleMouseOut = () => setIsHovered(false);

  return (
    <div
      className={`hover-effect ${isHovered ? 'hovered' : ''}`}
      onMouseOver={handleMouseOver}
      onMouseOut={handleMouseOut}
    >
      Hover over me
    </div>
  );
}

export default AnimatedComponent;

.hover-effect {
  transition: opacity 0.3s ease-in-out;
  opacity: 1;
}

.hover-effect.hovered {
  opacity: 0.5;
}