使用 React-Icon 库将鼠标悬停在图标上时显示文本 [英] Display text when hovering over an icon using React-Icon Library

问题描述

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

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

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

import React, { useState } from 'react';从 './SkillsBtnElements' 导入 { SkillsButton }const SkillsBtn = () =>{const [hover, setHover] = useState(false);const onHover = () =>{设置悬停(！悬停)}返回 (<div onMouseEnter={onHover} onMouseLeave={onHover} role=button"tabIndex='-3' >{悬停?技能":<技能按钮/>}

)}导出默认的 SkillsBtn；

对于造型我有

从'styled-components'导入样式；从'react-icons/gi'导入{GiGearHammer}；export const SkillsButton = styled(GiGearHammer)`字体大小:1.75rem；白颜色;弹性增长:1；光标:指针；@media 屏幕和(最大宽度:960 像素){过渡:所有 0.2 秒的缓入缓出；字体大小:1rem；白颜色;}&:悬停{过渡:所有 0.2 秒的缓入缓出；}`;

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

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

解决方案

异常效果是由于过时的关闭问题.<代码>{悬停?技能":<SkillsButton/>} 正在以过时的悬停值呈现.如果您希望文本仅在鼠标悬停在 div 上时出现，请尝试为 onMouseEnter 和 onMouseLeave 事件创建两个单独的函数.像这样:

import React, { useState } from "react";从 './SkillsBtnElements' 导入 { SkillsButton }const SkillsBtn = () =>{const [hover, setHover] = useState(false);const onHover = () =>{设置悬停(真)；};const onLeave = () =>{设置悬停(假)；};返回 (
);};导出默认的 SkillsBtn；

so I am attempting to display text when you hover over a mouse. I am using React-Icons library and for styling using Styled-Components

I have 4 icons on my navbar - Home - About - Skills - Work

Each button is its own component in order for the hover to work properly so when i hover over 1 icon it doesnt display the text for all of them

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;

And for styling i have

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

I do achieve a hover effect, but when I constantly hover the icon the logic seems to get messed up bc then its only the text that appears and when i hover over the text the icon appears...which isn't the desired effect

Example: https://gph.is/g/4ARQoRV

解决方案

The abnormal effect is due to the stale closure problem. {hover ? "SKILLS" : <SkillsButton />} is being rendered with a stale value of hover. If you want the text to only appear when the mouse is over the div, try creating two separate functions for onMouseEnter and onMouseLeave events. Like this:

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;

这篇关于使用 React-Icon 库将鼠标悬停在图标上时显示文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！