Changing the Color of Text on Hover in React

Question

Please help a non-developer. I need to change the color of the text upon hover. Here is the code. This is for a link that downloads my resume on click, and I copied it directly from a Framer support article about creating downloadable links. I was able to figure out how to change it from a button to text, created the style I need in its non-hover state, but I have no idea how to make the text change color on hover. I need it to change from color 151C5D to 8939FF on hover. I'm sorry for the total newbie question and any help is greatly appreciated. Thank you

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 }}
            >
                {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",
}

I've tried everything I can think of, but I am not a dev so basically I've just been screwing it up.

score 0 · Accepted Answer · answered Jun 30 '23 at 19:43

0

I haven't any experience of Frame Motion, but I suggest you set the color in whileHover, and check if it's work.

whileHover={{ scale: 1.0, color: '#8939FF' }}

answered Jun 30 '23 at 19:43

user22156940

16

Tried that and it didn't give me an error but it didn't work. Seems it did nothing. – DJ101010 Jun 30 '23 at 19:52
Nevermind it DID work. Thank you so much!! – DJ101010 Jun 30 '23 at 20:09
I have no idea, I tested a simple demo just like your code on sandbox, and whileHover just worked well. – user22156940 Jun 30 '23 at 20:29
ok, that's great. – user22156940 Jun 30 '23 at 20:31

Changing the Color of Text on Hover in React

1 Answers1