CODEWITHSUNDEEP
javascriptreactjs
Josh Silveous
Josh Silveous

Reputation: 763

How to change a style property of a div when hovering using inline styles and React

I'm using React and TypeScript for a project, and I'm using inline CSS. I'd like to set it so that hovering over a div to execute a function that changes it's background color. I don't want to use ::hover and classes in CSS.

<div
     onClick={() => setDropDownOpen(prev => !prev)}
     style={buttonstyle}
     onMouseOver={lightenBackground}
>


const buttonstyle: React.CSSProperties = {
    display: 'flex',
    alignItems: 'center',
    gap: '20px'
};

function lightenBackground(event: React.MouseEvent<HTMLDivElement, MouseEvent>): void {
    console.log(event.target)
}

I'm trying to access it using the event.target, but I can't access style properties from there.

Upvotes: 0

Views: 41

Answers (1)

dave
dave

Reputation: 64725

You could so something like:

const [style, setStyle] = useState(buttonStyle);

const buttonstyle: React.CSSProperties = {
  display: 'flex',
  alignItems: 'center',
  gap: '20px'
};

const lightenBackground = () => {
    setStyle({...buttonstyle, background: '#FFFFFF'});
};

const originalBackground = () => {
    setStyle(buttonStyle);
};

render() {
    return (
        <div
            onClick={() => setDropDownOpen(prev => !prev)}
            style={buttonstyle}
            onMouseEnter={lightenBackground}
            onMouseLeave={originalBackground}
        />
    )
}

Upvotes: 1

Related Questions