如何在jsx中使用hover更改图像

import React, { useState } from 'react';
import './styles.css'; // 引入样式文件

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

  const handleHover = () => {
    setIsHovered(!isHovered);
  };

  return (
    <div className="image-container">
      <img
        src={isHovered ? 'image-hovered.jpg' : 'image-normal.jpg'}
        alt="Image"
        onMouseEnter={handleHover}
        onMouseLeave={handleHover}
      />
    </div>
  );
};

export default ImageComponent;

.image-container {
  position: relative;
  width: 200px;
  height: 200px;
}

img {
  width: 100%;
  height: 100%;
  transition: opacity 0.3s ease-in-out;
}

img:hover {
  opacity: 0.8;
}