时间戳

首页 > 解决方案 > 反复改变图片onMouseOver的背景颜色

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

问题描述

我有一张图片，希望它的背景发生变化，并从整个光谱中顺序地反复获取随机颜色，直到用户的鼠标退出图片。我想解决方案应该使用 setInterval （请参阅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;

这是一个试图实现我的想法的小提琴：第一个笑脸应该改变颜色 onMouseOver 并恢复正常 onMouseOut。

这是我的想法：我想在他们的页脚处实现 FontAwesome.com 在他们的徽标上所做的事情：它会在鼠标悬停时改变颜色，否则会停止。但这不是图片，而是字体（？）。相反，我有一个透明的徽标，我想动态更改背景，以便它复制 Fontawesome 的精彩技巧。有任何想法吗？

* 更新 *

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

标签： javascripthtmlcssnested

解决方案

我实现了我想要的。

当用户的鼠标悬停在我的徽标上时，我希望我的徽标能够“很好地”改变颜色（就像魔术一样，类似于页脚处的 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">

推荐阅读