逐渐动画svg

Question

我该如何解决这个问题?我需要在悬停时动画一个div，它包含两个svg或imgs，没关系。当我将鼠标悬停在div内时，这两个图像将会移动。也许用Javascript，但我似乎可以在悬停时瞄准img。只有鼠标悬停?这将永远改变这个州。我需要帮助。谢谢你！

<div class="circle">
<img id="line-1" src="line.svg" alt="line">
<img id="line-2" src="line.svg" alt="line">
<div>

.circle {
position: relative;
height: 150px;
width: 150px;
border: 6px solid black;
border-radius: 50%;
padding: 10px;
}
#line-1 {
positin: absolute;
left: 0;
animation: slide 1s ease-in infinite;}
#line-2 {
positin: absolute;
right: 0;
animation: slide-otherway 1s ease-in infinite;}
@keyframes slide {
0% {
left: 0;
}
100% {
left: 20px;
}
}
@keyframes slide-otherway {
0% {
right: 0;
}
100% {
right: 20px;
}
}

Answer 1

使用mouseenter时，你还需要使用mouseleave，当鼠标离开时，mouseleave会触发