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; 

}