I have created an SVG picture that I am trying to animate. Behind the elements I want to animate on mouse hover, I have added transparent rectangles. The hover effect works well on these elements as the cursor changes to pointer.
However, when I attempt to animate other elements above these rectangles on mouse hover using the CSS sibling combinator ~, the element does not animate:
const useStyles = makeStyles({
btcContainer: {
fill: "none",
pointerEvents: "all",
"&:hover": {
cursor: "pointer",
"& ~ $btc": {
transform: "translateY(-20px)"
}
}
},
caseContainer: {
fill: "none",
pointerEvents: "all",
"&:hover": {
cursor: "pointer",
"& ~ $case": {
transform: "translateY(-20px)"
}
}
},
coffeeContainer: {
fill: "none",
pointerEvents: "all",
"&:hover": {
cursor: "pointer",
"& ~ $coffee": {
transform: "translateY(-20px)"
}
}
},
glassesContainer: {
fill: "none",
pointerEvents: "all",
"&:hover": {
cursor: "pointer",
"& ~ $glasses": {
transform: "translateY(-20px)"
}
}
},
pcContainer: {
fill: "none",
pointerEvents: "all",
"&:hover": {
cursor: "pointer",
"& ~ $pc": {
transform: "translateY(-20px)"
}
}
},
glasses: {}
});
This is my style setup using material-ui. So, for instance, when hovering over the glassesContainer, I want the glasses class to move with a translation of -20px.
The JSX code for these classes looks like this:
<g>
// SVG Elements here
</g>
I'm having trouble with getting this to work. I've tried removing the ~ but it did not solve the issue.
You can view the codesandbox for this problem here.
Any help would be greatly appreciated!