mcadamsjustin
mcadamsjustin

Reputation: 361

Hover change color on SVG

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>

Upvotes: 0

Views: 67

Answers (1)

Mister Jojo
Mister Jojo

Reputation: 22265

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>

Upvotes: 1

Related Questions