大致思路:

定義一個變量,名為hover,通過該變量來判斷該塊是否處于被hover的狀態(tài)
onMouseOver:鼠標移上來時
onMouseLeave:鼠標移走時
(就像一個Switch開關(guān),實際上只能代替hover的作用,畢竟內(nèi)聯(lián)沒有偽類)
解釋:store.color是mobx定義的全局變量,在頭部有引用,在此將它視為一個顏色就好

const [hoverput, setHoverput] = React.useState(false)function getcolor(hover: boolean) {return hover ? store.color : ''
}return (<divclassName={style.poa}onMouseOver={() => {setHoverput(true)}}onMouseLeave={() => {setHoverput(false)}}style={{ color: getcolor(hoverput) }}><span className={style.poaSpan} id="poaSpan">Put</span><span className={style.poS}>添加</span></div>
)

---

額外思路:

其實這么寫還不如多定義幾個類,因為是為了通過mobx去控制主題顏色,那么更改主題顏色的時候更改整個類名,實際上更易于后續(xù)管理

• 但這仍然是一個解決內(nèi)聯(lián)沒有:hover偽類的好辦法

總結(jié)

以上是生活随笔為你收集整理的hook情况下,解决内联没有:hover的方案的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。