Поменять цвета двух объектов SVG при наведении курсора на один из них

#html #css #css3 #вёрстка #svg

У меня есть код SVG-файла:



circle{
fill: #FFF;}

circle:hover{
fill: green}

rect{
fill: #000;}

rect:hover{
fill:red;} 





Выглядит он вот так:  



Как  сделать, чтобы когда я наводила курсор на черный квадрат, у меня два круга и
квадрат одновременно меняли цвета?
Я знаю как прописать отдельно ховер для кругов и отдельно для квадрата, а вот чтобы
при наведении курсора на квадрат менялся цвет кругов не знаю. 
    

Ответы

Ответ 1

В этом случае можно использовать CSS переменные. 

Объединяем квадрат и окружности в одну группу и добавляем css переменные, которые
будут принимать разные значения в зависимости от :hover 



 .change{
  --color-rect: black; 
   --color-circle: white;
   
   }

 .change:hover {
   --color-rect: red;
   --color-circle: green;
  } 





Посмотрите на эту тему более сложный пример 



.predator-colors {
  --color-face: #7986CB;
  --color-nose: #9FA8DA;
  --color-hair-right:#3949AB;
  --color-hair-right2:#3949AB;
  --color-hair-left:#3949AB;
  --color-hair-left2:#3949AB;
  --color-eye-right:#1A237E;
  --color-pupil-right:#77006B;
  --color-eye-left:#1A237E;
  --color-pupil-left:#77006B;
  --color-ellipse1:#9FA8DA;
  --color-ellipse2:#7986CB;
  --color-ellipse3:#C5CAE9;
}  

.predator-colors:hover {
  --color-face: #3F8B4D;  
  --color-nose: #58C46C;
  --color-hair-right:gold;
  --color-hair-right2:#FFBB00;
  --color-hair-left:gold;
  --color-hair-left2:#FFBB00;
  --color-eye-right:#77006B;
  --color-pupil-right:#FF4151;
  --color-eye-left:#77006B;
  --color-pupil-left:#FF4151;
  --color-ellipse1:#FFDD00;
  --color-ellipse2:#C1A700;
  --color-ellipse3:#FFEE7D;
}