在悬停时显示文本（反应）答案

【问题标题】：show text on hover (React)在悬停时显示文本（反应）
【发布时间】：2021-12-07 10:24:31
【问题描述】：

我有两个 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>

【问题讨论】：

因为两个div都绑定到同一个状态text

标签： reactjs hover

【解决方案1】：

您必须为每个设置两个不同的 useState。在当前情况下，当您将鼠标悬停在其中之一上时，您的状态值将变为该状态值之一。

像这样：

 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=> setText2(1)} onMouseLeave={e=> setText2(0)}>
     <h1>hover the div to show the text</h1>
     <p style={{opacity: `${text2}`}}>some dummy text</p>
 </div>

【讨论】：

【解决方案2】：

我已经修好了，代码如下：

 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>

【讨论】：