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 {&nbsp; animation-play-state: paused;&nbsp;&nbsp; fill:#000;&nbsp;}&nbsp;经过#svg rect:hover {&nbsp; animation: none;&nbsp;&nbsp; fill:#000;&nbsp;}&nbsp;