小编Len*_*lez的帖子

使用 React-Icon 库将鼠标悬停在图标上时显示文本

所以我试图在您将鼠标悬停在鼠标上时显示文本。我正在使用 React-Icons 库并使用 Styled-Components 进行样式设置

我的导航栏上有 4 个图标 - 主页 - 关于 - 技能 - 工作

每个按钮都是其自己的组件,以便悬停正常工作,因此当我将鼠标悬停在 1 个图标上时,它不会显示所有图标的文本

import React, { useState } from 'react';
import { SkillsButton } from './SkillsBtnElements'

const SkillsBtn = () => {
  const [hover, setHover] = useState(false);
  const onHover = () => {
    setHover(!hover)
  }

  return (
    <div onMouseEnter={onHover} onMouseLeave={onHover} role="button" tabIndex='-3' >
      { hover ? "SKILLS" : <SkillsButton /> }
    </div>
  )
}

export default SkillsBtn;
Run Code Online (Sandbox Code Playgroud)

对于造型我有

import styled from 'styled-components';
import { …
Run Code Online (Sandbox Code Playgroud)

javascript reactjs styled-components react-icons

5
推荐指数
1
解决办法
4万
查看次数