Hover 在 SVG 上改变颜色

Question

在下面的代码中，我想让眼睛和眉毛在 hover 上改变颜色。 如果您在左眼上使用 hover 而不是右眼，我可以让它工作。 右眼眉在 hover 上也有一个奇怪的填充。 我认为这与一般同级选择器有关~不向后工作。 这不是我的 SVG 代码，如果可能的话，我不知道如何组合眼睛。

 .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

那？

 .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>