小编Wil*_*ill的帖子

如何在鼠标悬停时暂停间隔并在鼠标不再悬停时恢复

我创建了一个页面，其中 div 的背景颜色经常变化。我想做到这一点，以便当鼠标悬停（或悬停）时，只要鼠标悬停在那里，颜色变换器就会在其所在的位置暂停。当鼠标不再悬停在 div 上时，颜色会继续从上次停止的位置发生变化。我在这个网站上遇到的最接近的例子使用了 JQuery 解决方案。我不是在寻找 JQuery 解决方案。我正在寻找一个 JavaScript 解决方案。我感谢您的所有回复。谢谢你！

var dammit = document.getElementById("muck");
var colorChange = document.getElementById("color-changer");
var colors = ["red", "blue", "green", "pink"];
var counter = 0;

function changer() {
  if (counter >= colors.length) {
    counter = 0;
  };

  colorChange.style.background = colors[counter];
  counter++;

};

var myTimer = setInterval(changer, 3000);

Run Code Online (Sandbox Code Playgroud)

body {
  background: #FDCA40;
  margin: 0;
  padding: 0;
  -webkit-transition: background 0.9s;
  -moz-transition: background 0.9s;
  transition: background 0.9s;
}

div#muck {
  width: 100%;
  height: 100vh;
}

Run Code Online (Sandbox Code Playgroud)