在學習React和做一個小練習網站的程序中。在我的一個頁面上，我有一個 CSS 網格，其中有一個中央網格正方形，里面有文本，文本周圍是多個影像。在文本中，我在某些單詞上放置了 span 以使它們具有不同的顏色，并且每個單詞在某處都有相應的影像。
<div className="gridBox">
{/* About Heading Sq */}
<div className="grdSq--0">
<div className="aboutBox">
<p>
<span className="about">About</span>
<br />
<span className="me">me</span>
</p>
<ul>
<li>
<span>Born</span>: 1992
</li>
<li>
Graduated <span>Highschool</span>
</li>
<li>
Lived in <span>Europe</span> for a Year
</li>
<li>
Worked As A <span>Waiter</span>
</li>
<li>
Loves Working in The <span>Garden</span>
</li>
<li>
Worked as a <span>Tiler/Landscaper</span>
</li>
<li>
Became a Student at <span>42</span>: 2020
</li>
<li>
Trainee Software Engineer at <span>SRA</span>: 2022
</li>
</ul>
</div>
</div>
{/* highschool */}
<div className="grdSq--1">
<div className="grdImg grdImg--1"></div>
</div>
{/* 42 */}
<div className="grdSq--2">
<div value={2} className="grdImg grdImg--2"></div>
</div>
{/* born */}
<div className="grdSq--3">
<div className="grdImg grdImg--3"></div>
</div>
{/* tradie */}
<div className="grdSq--4">
<div className="grdImg grdImg--4"></div>
</div>
{/* waiter*/}
<div className="grdSq--5">
<div className="grdImg grdImg--5"></div>
</div>
{/* travel */}
<div className="grdSq--6">
<div className="grdImg grdImg--6"></div>
</div>
{/* garden */}
<div className="grdSq--7">
<div className="grdImg grdImg--7"></div>
</div>
<div className="grdSq--8">
<div className="grdImg grdImg--8"></div>
</div>
</div>
</div>
這就是我的代碼目前的樣子
我想要做的是讓它懸停在跨度詞之一上，相應的影像將從不透明度 0 變為 1。如果我需要 useState 或使用 onHover 并使用事件，我不清楚如何實作這一點或者是什么。將不勝感激。
uj5u.com熱心網友回復：
您可以使用onMouseEnter和onMouseLeave事件將狀態設定為特定的數字、名稱或 ID，然后可用于更改具有該數字、名稱或 ID 的相應影像的不透明度。
啟動狀態如下：
const [hoveredImage, setHoveredImage] = useState("")
然后，在每個跨度中，創建觸發狀態變化的事件，例如：
<span onm ouseEnter={() => setHoveredImage("born")} onm ouseLeave={() => setHoveredImage("")}>Born</span>
最后，使用狀態來改變影像的不透明度：
{/* born */}
<div className="grdSq--3" style={hoveredImage === "born" ? {opacity: 1} : {opacity: 0}}>
<div className="grdImg grdImg--3"></div>
</div>
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/533607.html
標籤：反应事件反应挂钩徘徊