Switching colors on SVG when hovering

When I hover over the code below, I want both eyes and eyebrows to change color. I've managed to get it working for the left eye, but not the right eye. Additionally, the fill on the right eyebrow looks strange when hovered over. I suspect this issue is related to the general sibling selector ~ not functioning in reverse. Since I didn't create this SVG code and lack knowledge on how to merge the eyes, I'm not sure if it's even 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>

csssvghover

Answer №1

Can you help me understand this CSS code?

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Introducing the new and improved SweetAlert 2.0, the ultimate solution for

I am currently utilizing SweetAlert2.0, known as "This One" <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script> It is functioning properly; however, I would like to display a table, div, or HTML element within this swe ...

javascriptjqueryhtmlcss

A method to apply a class to the third <li> element using javascript

Can someone help me figure out how to add a class to the third element using Javascript? Here is the structure I am working with: <ul class="products-grid row four-columns first"> <li class="item"></li> <li class="item"></li&g ...

javascriptjqueryhtmlcss

Mozilla Firefox does not have the capability to support preloading

I am having an issue with preloading CSS sheets. I attempted to preload the CSS sheet using the preload attribute in HTML. It works fine on Google Chrome, but unfortunately, it does not work on Firefox. <head> <link href=assets/css/master.c ...

htmlcssfirefoxoptimizationpreload

What can be done to prevent the angular material select from overflowing the screen?

I have integrated an Angular Material Select component into my application, which can be found here: https://material.angular.io/components/select/overview. The issue I am facing is that when the select element is positioned near the bottom of the screen a ...

cssangulartypescriptmaterial-designangular-material

Setting the height of a div to 100% is not effective

I've designed a two-column layout. You can view the code on jsfiddle.net. My problem is that I want the center line with a width of 10px to have a height of 100%. I have a container div with the ID #obal (set to height: auto). When I set the height of ...

htmlcss

Angular JS: Automatically toggle the visibility of a div on a panel click event

There is a row, panel, and a closed div on load. Clicking on the panel should make the div appear while making the row and panel disappear. Clicking on X should make the panel and row appear again. <script src="https://ajax.googleapis.com/ajax/libs/ ...

javascripthtmlcssangularjs

Transfer responsibilities of events to the canvas and then fetch the Element in the handler

Currently, I am utilizing the Raphaël library to create a network graph, where nodes are depicted as circles. Users have the ability to dynamically add nodes by clicking on the canvas. When a new node is added, an Element object is pushed into both a Set ...

javascriptjqueryhtmlsvgraphael

Arranging my form input fields in a neat vertical stack

@gnagy @Satwik Nadkarny I appreciate the help you both provided, and I wish I could give a plus to your responses (requires 15 rep sadly), but I have encountered another issue. After the first two text input fields, I added an additional input field for e ...

htmlcssformsinputfield

How can you adjust the dimensions of a child div?

Hey there! I've got a div called bat. #bat{ width:50%; height:50%; } Here's the HTML: <div id="bat">dynamic div will appear here</div> When dynamic content is placed inside the div and it's larger than #bat, th ...

jquerycss

Mobile display exhibiting glitches in animation performance

I have implemented an animation in the provided code snippet. const logo = document.querySelector('.logo'); const buttons = document.querySelectorAll('.loadclass'); const html = document.querySelector('html') const cornerme ...

javascripthtmlcss

Including a drop-down arrow or triangle next to the initial button

In the navigation bar displayed below https://codepen.io/shaswat/pen/XzpRXL Is it possible to create a down triangle or arrow next to the "home" link, which changes direction upward when hovered over? How can this be achieved without modifying any HTML e ...

htmlcss

How to create a slideToggle effect for nested ul and li elements

Initially, everything was working fine until I put it through the W3C validator. After fixing the errors, now it's not functioning as expected. I have created a jsfiddle The setup involves nested ul elements being used as dropdowns, with headers tha ...

jquerycssnestedhtml-lists

Creating a personalized design for MUI TextField spin button

Looking to customize the appearance of the up/down spin buttons in MUI TextField. Desiring white arrows and a black surrounding area that's slightly larger, akin to this: I'm aware that adjustments need to be made within input::-webkit-outer-sp ...

htmlcssreactjstypescriptmaterial-ui

Positioning of content in bootstrap's navbar and dropdown menus

The issue lies in the drop-down functionality (you can check out the problematic html code on this codepen, originally inspired by this source). <header class="pb-3"> <nav class="navbar navbar-expand-md navbar-light bg-white borde ...

cssdrop-down-menudropdownnavbarbootstrap-5

Navigation shadow in Bootstrap not showing up on nav.shadow

I've created a navigation bar component using vue.js and am styling it with bootstrap by including the framework in the main HTML file. Although I've added the desired styling to the navbar component, I'm facing an issue where adding the sh ...

htmlcssvue.jsbootstrap-4

Sliding through HTML content

Unfortunately, I lack expertise in advanced HTML and CSS. After some investigation, I attempted to create a "content slider" similar to the one on the Redlight Traffic website (an anti-human trafficking organization). However, my efforts have been unsucces ...

javascripthtmlcssjscript

Webpack is failing to recognize certain CSS files

My development stack includes Vue.js 2.5.15, Webpack 4.12.0, css-loader 0.28.11, ASP.Net Core 2.1 in Visual Studio 2017. Starting with the Visual Studio asp.net core template project for Vue and Typescript, I prefer to have individual small CSS files with ...

csstypescriptwebpackvue.jscss-loader

What is the best way to use CSS to center two blocks with space in between them?

My goal is to achieve a specific design: I want two text blocks with some space in between them aligned around the midline of the page (refer to the image). I have experimented with the float property, as well as used margin and padding to create the gap ...

htmlcssalignment

What is the best way to ensure the div stays in sync with scrolling?

Trying to synchronize two divs while scrolling. Essentially, I have a page scroll and want to fix the second div when it reaches the top. Please refer to the gif icon attached for clarification. You can view my progress so far here. The current issue in ...

jqueryhtmlcssparallax

When adjusting to mobile dimensions, the responsive website design struggles to center the navbar properly

I am currently developing my senior year portfolio website and I am struggling to center the navbar (Work About Contact) when it is in mobile mode. My goal is for it to be positioned directly below the logo, perfectly centered, but so far nothing I have tr ...

htmlcssiphoneresponsive-designmedia-queries