如何在 css 中的 hover 時停止自動滾動 animation？

Question

我是初學者，第一次使用 animation 和轉換。 我正在嘗試停止 animation 當我在“此處的一些文本”上使用 hover 但我沒有得到正確的 output 可能是因為 &:hover 的放置不准確或錯誤，請幫助解決此問題。

 #contentwrapper { height: 190px; background-color: tomato; overflow-y: hidden; } #inner-wrapper { animation: autoscroll 10s linear infinite; } @keyframes autoscroll { &:hover { animation-play-state: paused; } from { transform: translate3d(0, 0, 0); } to { transform: translate3d(0, -90%, 0); } }

 <div id="contentwrapper"> <div id="inner-wrapper"> <div><a href="#">some text here</a></div> <div><a href="#">some text here</a></div> <div><a href="#">some text here</a></div> <div><a href="#">some text here</a></div> <div><a href="#">some text here</a></div> <div><a href="#">some text here</a></div> <div><a href="#">some text here</a></div> <div><a href="#">some text here</a></div> </div> </div>

Answer 1

您可以在元素本身上使用:hover ：

 #contentwrapper { height: 190px; background-color: tomato; overflow-y: hidden; } #inner-wrapper { animation: autoscroll 10s linear infinite; } #inner-wrapper:hover{ animation-play-state: paused; } @keyframes autoscroll { from { transform: translate3d(0,0,0); } to { transform: translate3d(0,-90%,0); } }

 <div id="contentwrapper"> <div id="inner-wrapper"> <div><a href="#">some text here</a></div> <div><a href="#">some text here</a></div> <div><a href="#">some text here</a></div> <div><a href="#">some text here</a></div> <div><a href="#">some text here</a></div> <div><a href="#">some text here</a></div> <div><a href="#">some text here</a></div> <div><a href="#">some text here</a></div> </div> </div>