在悬停时更改React中的背景色

import React, { useState } from 'react';

function App() {
  const [backgroundColor, setBackgroundColor] = useState('#ffffff');

  // 其他组件代码...

  return (
    <div style={{ backgroundColor }}>Hello, World!</div>
  );
}

export default App;

import React, { useState } from 'react';

function App() {
  const [backgroundColor, setBackgroundColor] = useState('#ffffff');

  const changeBackgroundColor = () => {
    setBackgroundColor('#ff0000'); // 更改背景色为红色
  }

  return (
    <div style={{ backgroundColor }} onClick={changeBackgroundColor}>
      Hover over me to change the background color!
    </div>
  );
}

export default App;

import React, { useState } from 'react';

function App() {
  const [backgroundColor, setBackgroundColor] = useState('#ffffff');

  const changeBackgroundColor = () => {
    setBackgroundColor('#ff0000'); // 更改背景色为红色
  }

  const resetBackgroundColor = () => {
    setBackgroundColor('#ffffff'); // 重置背景色为白色
  }

  return (
    <div
      style={{ backgroundColor }}
      onClick={changeBackgroundColor}
      onMouseOver={changeBackgroundColor}
      onMouseOut={resetBackgroundColor}
    >
      Hover over me to change the background color!
    </div>
  );
}

export default App;