React中实现图标悬停切换Logo文字并添加淡入淡出过渡

核心实现步骤 #

• 使用React useState钩子管理当前显示的标题文本状态
• 为每个导航链接绑定鼠标悬停/离开事件，触发标题切换逻辑
• 给Logo容器添加CSS过渡属性，实现0.2秒的淡入淡出效果

完整组件代码 #

import { useState } from 'react';
import { Link } from 'react-router-dom';
import { LogoContainer, DesktopHeader, HomeSvg, ProjectsSvg, DesignSvg, AboutSvg } from './your-styles'; // 替换为实际组件路径

const HeaderDesktop = () => {
    // 初始化状态为默认标题
    const [activeHeading, setActiveHeading] = useState('edwin<em>d</em>harris');

    const headingOptions = {
        default: 'edwin<em>d</em>harris',
        home: 'home',
        projects: 'projects',
        design: 'design',
        about: 'about'
    };

    // 鼠标悬停时切换对应标题
    const handleHoverIn = (type) => {
        setActiveHeading(headingOptions[type]);
    };

    // 鼠标离开时恢复默认标题
    const handleHoverOut = () => {
        setActiveHeading(headingOptions.default);
    };

    // 重构Logo组件，接收动态内容props
    const Logo = ({ content }) => (
        <LogoContainer>
            <span dangerouslySetInnerHTML={{ __html: content }} />
        </LogoContainer>
    );

    return (
        <DesktopHeader>
            <Link 
                to="/"
                onMouseEnter={() => handleHoverIn('home')}
                onMouseLeave={handleHoverOut}
            >
                <HomeSvg />
            </Link>
            <Link 
                to="/projects"
                onMouseEnter={() => handleHoverIn('projects')}
                onMouseLeave={handleHoverOut}
            >
                <ProjectsSvg />
            </Link>
            <Link 
                to="/design"
                onMouseEnter={() => handleHoverIn('design')}
                onMouseLeave={handleHoverOut}
            >
                <DesignSvg />
            </Link>
            <Link 
                to="/about"
                onMouseEnter={() => handleHoverIn('about')}
                onMouseLeave={handleHoverOut}
            >
                <AboutSvg />
            </Link>
            <Logo content={activeHeading} />
        </DesktopHeader>
    );
};

export default HeaderDesktop;

添加淡入淡出过渡效果 #

修改你的LogoContainer styled组件，加入过渡属性：

import styled from 'styled-components';

const LogoContainer = styled.div`
    /* 保留原有样式 */
    opacity: 1;
    transition: opacity 0.2s ease-in-out;

    /* 可选：给内部文本也添加过渡，让切换更平滑 */
    span {
        display: inline-block;
        transition: opacity 0.2s ease-in-out;
    }
`;

关键细节说明 #

1. 状态驱动渲染：通过activeHeading状态控制Logo文本，确保状态变化时视图自动更新
2. 事件处理：每个导航链接独立绑定悬停事件，精准触发对应标题切换
3. 动态HTML渲染：使用dangerouslySetInnerHTML保留默认标题中的<em>标签样式
4. 过渡动画：利用CSS transition实现0.2秒的淡入淡出，让标题切换更流畅自然

内容的提问来源于stack exchange，提问作者edwindharris