#reactjs #hover
#реагирует на #парить
Вопрос:
У меня есть два дива, и я хочу, чтобы они отображали текст при наведении курсора, но когда я навожу курсор на один из них, они оба отображают текст. Вот код:
gt; const [text, setText] = useState(0); gt; lt;div onMouseEnter={e=gt; setText(1)} onMouseLeave={e=gt; setText(0)}gt; gt; lt;h1gt;hover the div to show the textlt;/h1gt; gt; lt;p style={{opacity: `${text}`}}gt;some dummy textlt;/pgt; gt; lt;/divgt; lt;div onMouseEnter={e=gt; setText(1)} onMouseLeave={e=gt; setText(0)}gt; gt; lt;h1gt;hover the div to show the textlt;/h1gt; gt; lt;p style={{opacity: `${text}`}}gt;some dummy textlt;/pgt; gt; lt;/divgt; Комментарии:
1. Потому что оба дива привязаны к одному и тому же состоянию
text
Ответ №1:
Вы должны установить два разных режима использования для каждого из них. В текущей ситуации, когда вы наводите курсор на один из них, значение вашего состояния становится единым для этого.
Подобный этому:
const [text, setText] = useState(0); lt;div onMouseEnter={e=gt; setText(1)} onMouseLeave={e=gt; setText(0)}gt; lt;h1gt;hover the div to show the textlt;/h1gt; lt;p style={{opacity: `${text}`}}gt;some dummy textlt;/pgt; lt;/divgt; lt;div onMouseEnter={e=gt; setText2(1)} onMouseLeave={e=gt; setText2(0)}gt; lt;h1gt;hover the div to show the textlt;/h1gt; lt;p style={{opacity: `${text2}`}}gt;some dummy textlt;/pgt; lt;/divgt; Ответ №2:
Я исправил это, вот код:
const [text, setText] = useState({firstDiv:0, secondDiv: 0}); lt;div onMouseEnter={e=gt; setText({firstDiv:1, secondDiv: 0})} onMouseLeave={e=gt; setText(0)}gt; lt;h1gt;hover the div to show the textlt;/h1gt; lt;p style={{opacity: text.firstDiv}}gt;some dummy textlt;/pgt; lt;/divgt; lt;div onMouseEnter={e=gt; setText({firstDiv:0, secondDiv: 1})} onMouseLeave={e=gt; setText(0)}gt; lt;h1gt;hover the div to show the textlt;/h1gt; lt;p style={{opacity: text.secondDiv}}gt;some dummy textlt;/pgt; lt;/divgt;