将鼠标悬停在 SVG 上更改颜色

编程问答 2022-06-02

问题描述

在下面的代码中，我想让眼睛和眉毛在悬停时改变颜色。如果您将鼠标悬停在左眼而不是右眼上，我可以让它工作。右眉毛在悬停时也有奇怪的填充。我认为这与一般的兄弟选择器 ~ 不向后工作有关。这不是我的 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,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,0"/>
        <circle id="Right_Eye" class="st7" cx="146.7" cy="61.1" r="3.6"/>
    </g>
  </svg>

解决方法

那个？

.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,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,0"/>
    <circle id="Right_Eye"     class="st7" cx="146.7" cy="61.1" r="3.6"/>
  </g>
</svg>

hoversvg