所以我試圖在您將鼠標懸停在鼠標上時顯示文本。我正在使用 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