在ReactJS中悬停图像的特定部分时，如何更改鼠标光标？

import React from 'react';

const ImageHoverCursor = () => {
  const imageStyle = {
    cursor: 'default', // 默认光标样式
    '&:hover': {
      cursor: 'pointer' // 悬停时的光标样式
    }
  };

  return (
    <div style={imageStyle}>
      <img src="path_to_your_image.jpg" alt="Hover Me" />
    </div>
  );
};

export default ImageHoverCursor;

/* ImageHoverCursor.module.css */
.imageContainer {
  cursor: default;
}

.imageContainer:hover {
  cursor: pointer;
}

import React from 'react';
import styles from './ImageHoverCursor.module.css';

const ImageHoverCursor = () => {
  return (
    <div className={styles.imageContainer}>
      <img src="path_to_your_image.jpg" alt="Hover Me" />
    </div>
  );
};

export default ImageHoverCursor;