nth child (an + b): hover не работает с CSS анимацией?

Question

Как заставить прямоугольник менять цвет при наведении?

Я пробовал синтаксис #svg rect:nth-child(an+b):hover, и он не работает.

Я попытался удалить animation-play-state:paused;, и он не работает.

Я попытался использовать background: вместо fill:, и это не работает.

#svg rect {
  --animation-delay: 0.1s;
  animation: ani 1.8s linear infinite var(--animation-delay);
}


#svg rect:hover {
  animation-play-state: paused; /*/ Removing this does not work /*/
  fill:#000; /*/ This is not working /*/
} 


#svg rect:nth-child(2) { --animation-delay: 0.2s; }
#svg rect:nth-child(3) { --animation-delay: 0.3s; }
#svg rect:nth-child(4) { --animation-delay: 0.4s; }
#svg rect:nth-child(5) { --animation-delay: 0.5s; }


#svg rect:nth-child(2):hover { fill:#000; } /*/ This is not working too /*/ 
#svg rect:nth-child(3):hover { background:#fff; } /*/ This is not working too /*/ 

@keyframes ani {
  0% {
    fill: #0057B8;
  }

  20% {
    fill: #F11E4A;
  }

  40% {
    fill: #F8A527;
  }

  60% {
    fill: #266D7F;
  }

  80% {
    fill: #82A;
  }

  100% {
    fill: #0057B8;
  }
}

<svg id="svg" width="401" height="275" viewBox="0 0 401 275" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="401" height="275" fill="white"/>
<rect x="50" y="91" width="57" height="57" fill="#C4C4C4"/>
<rect x="118" y="91" width="57" height="57" fill="#C4C4C4"/>
<rect x="186" y="91" width="57" height="57" fill="#C4C4C4"/>
<rect x="254" y="91" width="57" height="57" fill="#C4C4C4"/>
</svg>

Answer 1

Вы должны удалить анимацию, а не только приостановить ее, чтобы изменить заливку при наведении.

Поэтому необходимо заменить

#svg rect:hover {
  animation-play-state: paused; 
  fill:#000; 
} 

на

#svg rect:hover {
  animation: none; 
  fill:#000; 
}