逐渐为 SVG 设置动画

Question

How can I solve this. I need to animate on hover a div that contains two svgs or imgs, nevermind. How can i trigger that when I hover inside of that div, the two imgs will eg move. Maybe with Javascript, but I can seem to target the img when on hover. There is only mouseover? which leaves the state changed forever. I need help. Thank you!

<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

with mouseenter u also need to use mouseleave, mouseleave will trigger when ofc, the muse leaves