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

Question

所以我试图在您将鼠标悬停在鼠标上时显示文本。我正在使用 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;

对于造型我有

import styled from 'styled-components';

import { GiGearHammer } from 'react-icons/gi';

export const SkillsButton = styled(GiGearHammer)`

  font-size: 1.75rem;

  color: white;

  flex-grow: 1;

  cursor: pointer;

  @media screen and (max-width: 960px) {

    transition: all 0.2s ease-in-out;

    font-size: 1rem;

    color: white;

  }

  &:hover {

    transition: all 0.2s ease-in-out;

  }

`;

我确实实现了悬停效果，但是当我不断悬停图标时，逻辑似乎变得混乱，然后它只显示文本，当我将鼠标悬停在文本上时，图标出现......这不是所需的效果

示例： https: //gph.is/g/4ARQoRV

Answer 1

效果异常是由于关闭陈旧问题造成的。{hover ? "SKILLS" : <SkillsButton />}正在使用陈旧的悬停值进行渲染。如果您希望仅当鼠标位于 div 上时才显示文本，请尝试为 onMouseEnter 和 onMouseLeave 事件创建两个单独的函数。像这样：import React, { useState } from "react";import { SkillsButton } from './SkillsBtnElements'const SkillsBtn = () => {&nbsp; const [hover, setHover] = useState(false);&nbsp; const onHover = () => {&nbsp; &nbsp; setHover(true);&nbsp; };&nbsp; const onLeave = () => {&nbsp; &nbsp; setHover(false);&nbsp; };&nbsp; return (&nbsp; &nbsp; <div&nbsp; &nbsp; &nbsp; onMouseEnter={onHover}&nbsp; &nbsp; &nbsp; onMouseLeave={onLeave}&nbsp; &nbsp; &nbsp; role="button"&nbsp; &nbsp; &nbsp; tabIndex="-3"&nbsp; &nbsp; >&nbsp; &nbsp; &nbsp; {hover ? "SKILLS" : <SkillsButton />}&nbsp; &nbsp; </div>&nbsp; );};export default SkillsBtn;

Answer 2

一个更简单的选项，使用MUI 工具提示组件<Tooltip title="Delete">  <IconButton>    <DeleteIcon />  </IconButton></Tooltip>