nth-child(an+b):hover does not work with CSS animation? - html

Question

How to get the rect to change colour when hover?
I tried #svg rect:nth-child(an+b):hover syntax and it does not work.
I tried removing the animation-play-state:paused; and it does not work.
I tried using background: instead of fill:and it does not work.
#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

You must remove the animation and not only paused it to change fill on hover.
Therefore, you must replace
#svg rect:hover {
animation-play-state: paused;
fill:#000;
}
by
#svg rect:hover {
animation: none;
fill:#000;
}