javascript - 使用 React-Icon 库将鼠标悬停在图标上时显示文本
问题描述
因此,当您将鼠标悬停在鼠标上时,我试图显示文本。我正在使用 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 然后它只有出现的文本,当我将鼠标悬停在文本上时,图标出现......这不是想要的效果
解决方案
异常效果是由于陈旧的关闭问题造成的。{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;
推荐阅读
- python - pandas:shift(1)组中的所有值,除了第一个(每个组中)应该为0
- c++ - lambda体内有这个吗?
- python - 如何防止 conda virtual env pip 使用 Python 2.7 系统库?
- r - 如何使用 dplyr 创建一个具有由另一个变量分组的 2 列的平均值的新数据框?
- c# - 在 C# 中从 MySql 中读取特定行
- javascript - 一个应用程序中的多个 websocket
- java - 使用休眠保持基类和子类
- excel - Excel公式测量休息时间
- python - 为什么要为结构化数据使用递归神经网络?
- node.js - Mongoose bulkwrite 更新 - 如何将新的 obj 推送到数组中?