Неоднократно меняем цвет фона картинки на MouseOver

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;

Вот скрипка, пытающаяся реализовать то, что я имею в виду : Первый смайлик должен изменить цвет onMouseOver и вернуться к обычному onMouseOut.

Вот что я имею в виду: я хочу реализовать то, что FontAwesome.com делает со своим логотипом в нижнем колонтитуле :он меняет цвета на mooover и останавливается в противном случае.Но это не картинка, это шрифт (?).Вместо этого у меня есть логотип, который я сделал прозрачным, и я хочу динамически менять фон, чтобы он повторял хороший трюк Fontawesome.Есть идеи?

* Обновлено *

Ниже выкладываю подробное решение моего вопроса на основе ответов сообщества.Похоже, я пошел по пути Лео, но решение Ракибула тоже сработало.

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

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