如何解决使用React-Icon库将鼠标悬停在图标上时显示文本
所以当您将鼠标悬停在鼠标上时,我试图显示文本。 我正在使用React-Icons库,并使用样式化组件进行样式设置
导航栏上有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;
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。