Hover change color on SVG

Question

In the code below, I'd like to have both eyes and eye brows change color on hover. I can get it to work if you hover on the left eye, but not the right eye. The right eye brow also has a weird fill on hover. I assume this has to do with general sibling selector ~ not working backwards. This is not my SVG code and I'm ignorant on how to combine the eyes, if that's possible.

 .st6 { fill: none; stroke: #F3C3B3; stroke-miterlimit: 10; }.st7 { fill: #B88F7C; stroke: #F3C3B3; stroke-miterlimit: 10; }.st6:hover{ stroke:#d5b4a7; }.st7:hover{ stroke: #FFFFFF; }.st6:hover ~.st6{fill:#d5b4a7;}.st6:hover ~.st7{ fill:#d5b4a7; stroke: #FFFFFF; stroke-miterlimit: 10; }

 <svg version="1.1" id="BodyMap" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 257.9 872.3" style="enable-background:new 0 0 257.9 872.3;" xml:space="preserve"> <g id="Eyesbm"> <path id="Left_Eyebrow" class="st6" d="M99.7,59.6c0,0,10.9-10.2,21.8,0"/> <circle id="Left_Eye" class="st7" cx="110.5" cy="61.1" r="3.6"/> <path id="Right_Eyebrow" class="st6" d="M135.8,59.6c0,0,10.9-10.2,21.8,0"/> <circle id="Right_Eye" class="st7" cx="146.7" cy="61.1" r="3.6"/> </g> </svg>

Answer 1

that?

 .st6, .st7 { fill: none; stroke: #F3C3B3; stroke-miterlimit: 10; }.st7 { fill: #B88F7C; } #Eyesbm:hover.st6 { stroke:#d5b4a7; } #Eyesbm:hover.st7 { stroke: #FFFFFF; } #Eyesbm:hover #Right_Eyebrow { fill:#d5b4a7; }

 <svg version="1.1" id="BodyMap" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 257.9 872.3" style="enable-background:new 0 0 257.9 872.3;" xml:space="preserve"> <g id="Eyesbm"> <path id="Left_Eyebrow" class="st6" d="M99.7,59.6c0,0,10.9-10.2,21.8,0"/> <circle id="Left_Eye" class="st7" cx="110.5" cy="61.1" r="3.6"/> <path id="Right_Eyebrow" class="st6" d="M135.8,59.6c0,0,10.9-10.2,21.8,0"/> <circle id="Right_Eye" class="st7" cx="146.7" cy="61.1" r="3.6"/> </g> </svg>