使用 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;
  }
`;

我確實實現了懸停效果，但是當我不斷懸停圖標時，邏輯似乎變得混亂了 bc 然后它只出現了文本，當我將鼠標懸停在文本上時，圖標出現......這不是預期的效果

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

Answer 1

異常效果是由於陳舊的關閉問題。 {hover ? "SKILLS" : <SkillsButton />} {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>