hook情况下,解决内联没有:hover的方案

最新推荐文章于 2022-05-25 21:38:32 发布

CN-Dust

最新推荐文章于 2022-05-25 21:38:32 发布

阅读量230

点赞数

分类专栏：前端学习文章标签： javascript css

本文链接：https://blog.csdn.net/qq_36286039/article/details/119442883

版权

前端学习专栏收录该内容

85 篇文章 1 订阅

订阅专栏

本文介绍了如何在React应用中利用useState Hook和MobX来模拟CSS的:hover伪类效果，通过定义hover状态变量，并结合onMouseOver和onMouseLeave事件来切换元素的颜色。同时探讨了通过改变类名来管理主题颜色的替代方案，以实现更易于维护的代码结构。

摘要由CSDN通过智能技术生成

大致思路:

定义一个变量,名为hover,通过该变量来判断该块是否处于被hover的状态
onMouseOver:鼠标移上来时
onMouseLeave:鼠标移走时
(就像一个Switch开关,实际上只能代替hover的作用,毕竟内联没有伪类)
解释:store.color是mobx定义的全局变量,在头部有引用,在此将它视为一个颜色就好

const [hoverput, setHoverput] = React.useState(false)

function getcolor(hover: boolean) {
  return hover ? store.color : ''
}

return (
  <div
    className={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>
)