Изменение цвета при наведении на SVG

В приведенном ниже коде я хотел бы, чтобы и глаза, и брови меняли цвет при наведении. Я могу заставить его работать, если вы наведете курсор на левый глаз, но не на правый глаз. Правая бровь также имеет странную заливку при наведении. Я предполагаю, что это связано с тем, что общий селектор братьев и сестер ~ не работает в обратном направлении. Это не мой код 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>

css svg hover

22.12.2020 03:00

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

CSS: FlexBox

Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.

Перейти к ответу Данный вопрос помечен как решенный

Ответы 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>

22.12.2020 03:41

Другие вопросы по теме

Изображение svg не отображается на react.js

Формы SVG с feGaussianBlur stdDeviation неправильно отображаются в Google Chrome

Пользовательские значки шрифтов показывают крест в поле в реактивном нативе

Создайте пользовательский значок пользовательского интерфейса материала реакции из двойного пути svg d

Safari неправильно рисует тени на SVG через HTML5 Canvas

Почему размытие svg не работает в HTML или браузере?

Анимация пылающего полигона Svg

D3 SVG Переместите масштаб, чтобы прямоугольник внутри <g> имел другой угол

Значки шрифтов bootstrap 5 svg не работают должным образом

Можно ли отображать только половину значка SVG?

Изменение цвета при наведении на SVG

Ответы 1

Другие вопросы по теме

Похожие вопросы