使用 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 = () => {
  const [hover, setHover] = useState(false);
  const onHover = () => {
    setHover(true);
  };

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

export default SkillsBtn;

Answer 2

一个更简单的选项，使用 MUI 工具提示组件

<Tooltip title="Delete">
  <IconButton>
    <DeleteIcon />
  </IconButton>
</Tooltip>

Answer 3

 const [isHovered, setIsHovered] = useState(false);

   <div
      onMouseEnter={() => setIsHovered(true)}
      onMouseLeave={() => setIsHovered(false)}
    >
      <p>Hover over me</p>
      {isHovered && <p>Show this text on hover</p>}
    </div>

当鼠标进入div元素时，isHovered状态设置为true，当鼠标离开时，状态设置为false。

条件渲染内的文本 ({isHovered &&

Show this text on hide

}) 仅当 isHovered 为 true 时才会显示。