鼠标悬停时，重复更改图片的背景颜色

Question

我有一张图片，希望其背景不断改变，并随机从整个光谱中连续地取出颜色，直到用户的鼠标退出图片。我想解决方案应该使用 setInterval (看这里)，以下内容可能会有所帮助：

var red = Math.round(Math.random() * 255);
var green = Math.round(Math.random() * 255);
var blue = Math.round(Math.random() * 255);
var bg = "background-color: rgb(" + red + "," + green + "," + blue + ");";
x.style = bg;

这里是一个示例，我想在第一个笑脸上添加鼠标滑过变色的效果。我想实现像FontAwesome.com底部标志所做的那样：它会在mouseover时改变颜色并停止。但那不是一张图片，而是一个字体（?）。相反，我有一个透明的标志，我想动态更改背景，以复制Fontawesome的好技巧。有什么想法吗？

*更新* 根据社区答案，我在下面发布了我的问题的详细解决方案。看起来我遵循了Leo的方式，但Rakibul的解决方案也很好用。

- Avocaddo

---

您可以使用关键帧和CSS3动画。请参见https://dev59.com/QGgv5IYBdhLWcg3wHNHG - Leo Caseiro

谢谢！我知道如何将图片的背景更改为一种颜色（请参见此处）。相反，我想要在鼠标悬停时重复应用一个生成颜色的函数，使图片的背景采用_多种颜色_，并在鼠标移出时停止。提前致谢。 - Avocaddo

嗨，你可以在“hover”上使用“animation-play-state: pause”。 - Leo Caseiro

谢谢@LeoCaseiro，是的，那是正确的方向。你能回复一个完整的示例代码应用到我发布的问题参数中吗？提前致谢。 - Avocaddo

Answer 1

我达到了我的目标。 当用户的鼠标悬停在我的标志上时，我希望它能够“漂亮地”改变颜色（就像 FontAwesome 在页脚的标志 那样，有点神奇）。

.OAlogo {
  background-color: transparent;
  animation-play-state: paused;
}

.OAlogo:hover {
  animation: colorReplace 10s infinite;
  animation-timing-function: linear;
  animation-direction: alternate;
}

@keyframes colorReplace {
  0% {
    background-color: rgb(44, 132, 231);
  }
  10% {
    background-color: rgb(61, 192, 90);
  }
  20% {
    background-color: rgb(255, 211, 59);
  }
  30% {
    background-color: rgb(253, 136, 24);
  }
  40% {
    background-color: rgb(243, 129, 174);
  }
  50% {
    background-color: rgb(34, 138, 230);
  }
  60% {
    background-color: rgb(62, 192, 89);
  }
  70% {
    background-color: rgb(255, 211, 59);
  }
  80% {
    background-color: rgb(71, 193, 86);
  }
  90% {
    background-color: rgb(253, 126, 20);
  }
  100% {
    background-color: rgb(233, 109, 132);
  }
}

<img class="OAlogo" src="http://www.stouras.com/OperationsAcademia.github.io/images/OA-logo-solo.png" style="background: black;" width="100">

- Avocaddo

---

为了得到这个效果，需要将自己的标志图案变成透明的，然后放在黑色背景上（在我的情况下）。当用户悬停时，彩色动画开始播放。 - Avocaddo

Answer 2

你可以使用 setInterval 函数来重复运行你的代码。我已经修复了你代码中的一些小错误。查看更新后的fiddle：https://jsfiddle.net/zvebco3r/3/ 你可以将间隔时间（当前为25毫秒）更改为所需的长度。 HTML:

<img id="img" src="https://www.w3schools.com/jsref/smiley.gif" alt="Smiley" width="32" height="32">

JS：

var img = document.getElementById('img');

img.onmouseover = function() {
    changeIt = setInterval(function(){
       var red = Math.floor(Math.random() * 255);
       var green = Math.floor(Math.random() * 255);
       var blue = Math.floor(Math.random() * 255);
       img.style.backgroundColor="rgb("+red+","+green+","+blue+")";
    },25);
}

img.onmouseout = function() {
    this.style.backgroundColor="transparent";
    clearInterval(changeIt);
}

- Claire

Answer 3

使用CSS动画来改变颜色，并在悬停时使用animation-play-state: pause。

 .button {
    width:100px;
    height:20px;
    background-color: red;
    animation: colorReplace 5s infinite;
  }

  .button:hover {
    animation-play-state: paused;
  }


@keyframes colorReplace
{
  0%   {background-color:red;}
  30%  {background-color:green;}
  60%  {background-color:blue;}
  100%   {background-color:red;}
}

<input type="submit" value="submit" class="button" />

- Leo Caseiro

---

Leo有点匆忙，他上面的想法正在起作用。一旦完成，将发布一个完整的答案，完全适用于我所问的问题。 - Avocaddo

Answer 4

你需要使用所需的时间间隔（在下面的示例中设置为500）声明setInterval()，以便颜色可以在明确的间隔内随机更改。而onmouseover用于简单地检测图像上的悬停，然后随机设置颜色。最后，当检测到onmouseout时，颜色会变为无色。

var randomColor = function() {
  var r = Math.floor(Math.random() * 12);
  var g = Math.floor(Math.random() * 128);
  var b = Math.floor(Math.random() * 100);
  return "#" + r + g + b;
};

var colorChange;

document.getElementById("myImage").onmouseover = function() {
  colorChange = setInterval(function() {
    document.getElementById("myImage").style.backgroundColor = randomColor();
  }, 500);
};

document.getElementById("myImage").onmouseout = function() {
  this.style.backgroundColor = "";
  clearInterval(colorChange);
};

<img id="myImage" src="https://www.w3schools.com/jsref/smiley.gif" alt="Smiley">

- UkFLSUI

---

这很棒，Rakibul！我接受了你的答案，但我也很喜欢Leo的答案。我可能会稍微修改你的代码，使颜色的过渡更加线性/平滑（因为这将用于标志），如果未来有用户发现这个问题，我会在以后发布另一个回复。 - Avocaddo