javascript - 多色文本动画，但仅在悬停时

Question

颜色在变化，但是当我移开鼠标时它仍然在不断变化颜色

var color_text  = document.getElementById('nav');
var color_text1 = document.getElementById('nav1');
var color_text2 = document.getElementById('nav2');
var color_text3 = document.getElementById('nav3');

var color = new Array(4);
color[0] = "blue";
color[1] = "green";
color[2] = "yellow";
color[3] = "red";

function displaycolor() {
  x = Math.floor(Math.random() * color.length)
  color_text.style.color = color[x];
  setTimeout(displaycolor, 1000);
}

function displaycolor1() {
  x = Math.floor(Math.random() * color.length)
  color_text1.style.color = color[x];
  setTimeout(displaycolor1, 1000);
}

function displaycolor2() {
  x = Math.floor(Math.random() * color.length)
  color _text2.style.color = color[x];
  setTimeout(displaycolor2, 1000);
}

function displaycolor3() {
  x = Math.floor(Math.random() * color.length)
  color_text3.style.color = color[x];
  setTimeout(displaycolor3, 1000);
}

function rmvdis() {
  clearTimeout(); //when mouse leaves
}

<div class="collapse navbar-collapse" id="myNavbar">
  <ul class="nav navbar-nav">
    <li><a id="nav"  onmouseover="displaycolor();"  onmouseout="rmvdis();" href="index.html">Home</a></li>
    <li><a id="nav1" onmouseover="displaycolor1();" onmouseout="" href="about.html">About</a></li>
    <li><a id="nav2" onmouseover="displaycolor2();" onmouseout="" href="#">Gallery</a></li>
    <li><a id="nav3" onmouseover="displaycolor3();" onmouseout="" href="#">Contact</a></li>
  </ul>
  <ul class="nav navbar-nav navbar-right">

所以，我想要一些东西，比如当鼠标移出时颜色变为正常颜色，并且仅当鼠标在顶部时才改变颜色。

Answer 1

您可以使用 CSS3 动画实现此目的。

.text {
  font-size: 24px;
  font-weight: bold;
}
.text:hover {
  animation: animateColors 1s infinite;
}
@keyframes animateColors {
  0% { color: red; }
  50% { color: green; }
  100% { color: blue; }
}

<div class="text">Dummy Text</div>