如何讓矩形在懸停時改變顏色？我嘗試了#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>
1 回答
波斯汪
TA貢獻(xiàn)1811條經(jīng)驗 獲得超4個贊
您必須刪除動畫，而不僅僅是暫停它來更改懸停時的填充。
因此，您必須更換
#svg rect:hover {
animation-play-state: paused;
fill:#000;
}
經(jīng)過
#svg rect:hover {
animation: none;
fill:#000;
}
- 1 回答
- 0 關(guān)注
- 204 瀏覽
添加回答
舉報
0/150
提交
取消