求助：在React（Framer）中实现文本Hover时颜色切换

直接修改代码里的whileHover配置就能实现需求，具体改法如下：

1. 在内部motion.div的whileHover对象里添加颜色变化规则
2. 可选：加上过渡动画让颜色切换更自然

修改后的完整代码：

export default function Download(props) {
    const { title, tint, style, file } = props

    return (
        <motion.div style={{ ...style, ...containerStyle }}>
            <motion.div
                onTap={() => {
                    const link = document.createElement("a")
                    link.href = file
                    link.download = "download"
                    document.body.appendChild(link)
                    link.click()
                    link.remove()
                }}
                style={{
                    margin: 0,
                    padding: 0,
                    borderRadius: 0,
                    backgroundColor: "transparent",
                    color: "#151C5D",
                    fontSize: "2em",
                    fontWeight: "bold",
                    fontFamily: "karla",
                    lineHeight: "140%",
                    letterSpacing: ".023em",
                    cursor: "pointer",
                }}
                whileHover={{ scale: 1.0, color: "#8939FF" }}
                transition={{ duration: 0.2 }} // 可选，控制颜色切换的动画速度
            >
                {title}
            </motion.div>
        </motion.div>
    )
}

Download.defaultProps = {
    tint: "#09F",
    title: "Resume",
}

addPropertyControls(Download, {
    tint: {
        title: "Tint",
        type: ControlType.Color,
    },
    title: {
        title: "Label",
        type: ControlType.String,
    },
    file: {
        title: "File",
        type: ControlType.File,
        allowedFileTypes: [],
    },
})

const containerStyle = {
    display: "flex",
    justifyContent: "center",
    alignItems: "center",
    overflow: "hidden",
}

简单说明： #

• Framer Motion的whileHover属性专门用来定义鼠标悬停时的样式变化，这里添加color: "#8939FF"就能覆盖默认的文字颜色
• transition属性是可选配置，设置duration: 0.2会让颜色切换有0.2秒的平滑过渡，提升交互体验

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