问当我将鼠标悬停在我的文本上时，它会改变颜色，而颜色保持不变，我该怎么做呢？

EN

function enter() {
  const main = document.getElementById('main-with-javascript');
  main.style.animation = 'textchange 4s cubic-bezier(0.165, 0.84, 0.44, 1)';
  main.style.animationFillMode = 'forwards';
}

function leave() {
  const main = document.getElementById('main-with-javascript');
  main.style.animation = 'textchangeReverse 4s cubic-bezier(0.165, 0.84, 0.44, 1)';
}

#main-with-javascript {
  color: #dddddd;
  font-size: 20px;
}

.main {
  color: #dddddd;
  font-size: 20px;
  animation: textchangeReverse 4s cubic-bezier(0.165, 0.84, 0.44, 1);
  animation-fill-mode: forwards;
}

.main:hover {
  animation: textchange 4s cubic-bezier(0.165, 0.84, 0.44, 1);
  /*Let the element retain the style values from the last keyframe when the animation ends*/
  animation-fill-mode: forwards;
}

@keyframes textchange {
  from {
    color: #dddddd;
  }
  to {
    color: black;
  }
}

@keyframes textchangeReverse {
  from {
    color: black;
  }
  to {
    color: #dddddd;
  }
}

<h2>with css</h2>
<p class='main'>
  Lorem ipsum dolor sit amet
</p>
<hr/>
<h2>with css and javasctipt</h2>
<p id='main-with-javascript' onmouseenter='enter()' onmouseleave='leave()'>
  Lorem ipsum dolor sit amet
</p>