显示悬停文本(反应)

Question

我有两个div，我希望它们在悬停时显示文本，但是当我悬停在其中一个上时，它们都显示文本。以下是代码：

>     const [text, setText] = useState(0);
>     <div onMouseEnter={e=> setText(1)} onMouseLeave={e=> setText(0)}>
>         <h1>hover the div to show the text</h1>
>         <p style={{opacity: `${text}`}}>some dummy text</p>
>     </div>
      <div onMouseEnter={e=> setText(1)} onMouseLeave={e=> setText(0)}>
>         <h1>hover the div to show the text</h1>
>         <p style={{opacity: `${text}`}}>some dummy text</p>
>     </div>

Answer 1

我已经修好了，这是密码：

 const [text, setText] = useState({firstDiv:0, secondDiv: 0});
 <div onMouseEnter={e=> setText({firstDiv:1, secondDiv: 0})} onMouseLeave={e=> setText(0)}>
     <h1>hover the div to show the text</h1>
     <p style={{opacity: text.firstDiv}}>some dummy text</p>
 </div>
  <div onMouseEnter={e=> setText({firstDiv:0, secondDiv: 1})} onMouseLeave={e=> setText(0)}>
     <h1>hover the div to show the text</h1>
     <p style={{opacity: text.secondDiv}}>some dummy text</p>
 </div>