在next.js中，使用css，当父元素悬停在其上时，我如何目标子元素？

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

const ParentComponent = () => {
  return (
    <div className={styles.parent}>
      <div className={styles.child}>Target Element</div>
    </div>
  );
};

export default ParentComponent;

.parent {
  /* 父元素的样式 */
}

.parent:hover .child {
  /* 父元素悬停时子元素的样式 */
}