I’m trying to animate an SVG picture I created. I also created some transparent rectangles behind the elements I’m trying to animate on mouse hover. The hover is working fine in these elements, i.e., the cursor changes to pointer.

Then, I’m trying to animate the other elements above this rectangle on mouse hover, I’m trying to achieve it using the css sibling combinator ~, but it won’t animate the element:

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: {} }); 

These are my styles using material-ui. So, in this example, when I hover over the glassesContainer I want the glasses class to translateY(-20px).

My JSX for these classes are:

<g>   <ellipse     cx="{93.42}"     cy="{333.54}"     rx="{10.61}"     ry="{29.2}"     transform="rotate(-87.7 94.261 333.8)"     fill="#020230"     opacity="{0.6}"   />   <path     data-name="Glasses"     d="M143.47 293.85a2.25 2.25 0 00-.23-1.21l-15.59-31a6 6 0 00-11.29 2.05l-.42 3.86a2.29 2.29 0 004.55.5l.42-3.87a1.41 1.41 0 012.65-.48l13.7 27.2-21.76-2.36a8.7 8.7 0 00-9.57 7.7l-.05.49a6.72 6.72 0 00-3.93-.43v-.48a8.69 8.69 0 00-7.7-9.57l-21.76-2.36 19.21-23.64a1.39 1.39 0 011.62-.41 1.4 1.4 0 01.86 1.45l-.41 3.87a2.28 2.28 0 104.54.49l.42-3.86a6 6 0 00-3.69-6.19 5.93 5.93 0 00-6.89 1.77l-21.86 26.9a2.21 2.21 0 00-.5 1.2l-1.42 13.12c-.54 5 1 8.86 4.63 11.56 2.82 2.1 6.82 3.4 12.23 4h.19c5.41.58 9.59.17 12.79-1.28 4.11-1.86 6.47-5.33 7-10.3l.07-.7a2.12 2.12 0 013.93.43l-.07.69c-.54 5 1 8.87 4.64 11.56 2.81 2.1 6.81 3.41 12.22 4h.19c5.41.59 9.59.17 12.79-1.27 4.11-1.87 6.47-5.33 7-10.3l1.42-13.13v-.06zm-46.75 8.28c-.45 4.19-2.54 8.84-14.76 7.52h-.19c-12.22-1.32-13.26-6.31-12.81-10.51l1.18-10.85 23.67 2.57a4.1 4.1 0 013.64 4.52l-.73 6.77zm40.78 4.41c-.45 4.2-2.54 8.85-14.76 7.53h-.19c-12.22-1.33-13.26-6.32-12.81-10.51l.74-6.77a4.11 4.11 0 014.52-3.64l23.68 2.57-1.18 10.84z"     fill="url(#prefix__u)"     className="{classes.glasses}"   />   <rect     id="ed5c1aba-a022-4fb4-b81d-ab6d91227823"     data-name="glassesContainer"     x="39.51"     y="249.2"     width="106.21"     height="113.13"     className="{classes.glassesContainer}"   /> </g>           

I’m not sure why it’s not working. I also tried removing the ~, but it didn’t work.

The codesandbox for this problem is here: https://codesandbox.io/s/reverent-jennings-3idbx?file=/src/App.js

Thanks for any help!