Is there a way to create a custom div with an interactive hover effect that changes the background color? I am using styled components and passing in the color as props, but for some reason, the hover effect is not functioning correctly.
const ColorBlock = styled.div`
background-color: ${props => props.fillColor || "blue"};
flex-grow: 1;
height: 800px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
border: 5px solid black;
&:hover {
background-color: ${props => props.fillColor * 0.5};
}
`;
If I manually set a color for the hover effect like this:
&:hover {
background-color: blue;
}