反复改变图片onMouseOver的背景颜色

Question

我有一张图片，希望它的背景发生变化，并从整个光谱中顺序地反复获取随机颜色，直到用户的鼠标退出图片。我想解决方案应该使用 setInterval (see this) 并且以下内容会有所帮助：

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;

Here is a fiddle trying to implement what I have in mind: 第一个笑脸应该在onMouseOver 上改变颜色并在onMouseOut 上恢复正常。

这是我的想法：我想实现FontAwesome.com do on their logo at their footer：它会在鼠标悬停时改变颜色，否则会停止。但这不是图片，而是字体（？）。相反，我有一个透明的徽标，我想动态更改背景，以便它复制 Fontawesome 的精彩技巧。有什么想法吗？

* 更新 *

我将根据社区的回答在下面发布我的问题的详细解决方案。看起来我遵循了 Leo 的方式，但 Rakibul 的解决方案也很有效。

Answer 1

我实现了我想要的。

我希望当用户将鼠标悬停在徽标上时“漂亮”地改变颜色（就像魔术一样，类似于FontAwesome's logo at their footer）。

.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">

Answer 2

您必须使用所需的时间间隔声明setInterval()（在下面的示例中设置为 500），以便在确定的时间间隔内随机更改颜色。而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">

Answer 3

您可以使用setInterval 函数反复运行您的代码。您的代码中还有一些我已修复的小错误。在此处查看您更新的小提琴：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);
}

Answer 4

使用 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" />