Question

这个假设按钮在没有悬停时会显示为黄色，但根据您将鼠标悬停在它上面的时间，颜色会有所不同。因此动画将是持久的，无论它是否正在盘旋，如果你从未盘旋它，你永远不会知道悬停的颜色正在改变，因为它总是会变黄。

我希望这种解释有意义。我还没有提供任何代码，因为如果它可行，我不知道我将从哪里开始。

编辑：

HTML

<div class = "box"></div>
<button class = "btn">Colour change animation</button>

CSS

.box {
  margin : 50px;
  height  :200px;
  width  : 200px;
  background-color : pink;
}

.colour-changer:hover {
  animation : colour-change 5s linear 0s;
}

@keyframes colour-change {

  0% {
  }

  100% {
    background-color : purple;
  }

}

JS

document.addEventListener("DOMContentLoaded", function(){
    document.getElementsByClassName("btn")[0].addEventListener("click", function(){
    document.getElementsByClassName("box")[0].classList.add("colour-changer"); 
  });
});

我确实试过制作一个JSFiddle，但由于某些原因我无法使它工作。

无论如何，这会在添加类后使框更改颜色，并且您还将鼠标悬停在框中，并且每次悬停框时动画都会重新开始。我所追求的是无论悬停如何都能使动画发生，但只有在悬停时才能看到，因此盒子会变成粉红色。

Answer 1

我有一个jquery解决方案，通过一些工作，它可以迁移到vanilla javascript。此外，有1/6的机会没有颜色变化，但它应该让你有一种方法可以做到这一点：

HTML：

<div class = "box"></div><button class = "btn">Colour change when hovered</button>

CSS：

button{
  background-color:yellow;
}
.color-0{
  background-color:purple !important;
}
.color-1{
  background-color:blue !important;
}
.color-2{
  background-color:green !important;
}
.color-3{
  background-color:yellow !important;
}
.color-4{
  background-color:orange !important;
}
.color-5{
  background-color:red !important;
}

Javascript（+ JQuery）：

$("button").on("mouseenter",function(){
  $(this).removeClass("color-0");
  $(this).removeClass("color-1");
  $(this).removeClass("color-2");
  $(this).removeClass("color-3");
  $(this).removeClass("color-4");
  $(this).removeClass("color-5");
  var d = new Date();
  var seconds = d.getSeconds();
  var color = parseInt(seconds % 6);
  $(this).addClass("color-"+color.toString());
})

示例JSFiddle： https://jsfiddle.net/needsmorejson/yL31cjtd/19/

Answer 2

一个想法是使用多个背景来拥有两个层。顶部的一个总是可见的并且具有相同的颜色，底部的一个将连续动画并改变它的颜色（我们当然看不到它）。在悬停时，您将使第一个图层不可见，并暂停动画，我们将看到新颜色。

以下是一个例子：

＆＃13;

.box {
  height: 200px;
  width: 200px;
  background-image: linear-gradient(yellow, yellow), linear-gradient(red, red);
  background-size: 100%, 100%;
  animation: change 5s linear infinite alternate;
}

.box:hover {
  background-size: 0%, 100%;
  animation-play-state: paused
}

@keyframes change {
  0% {
    background-image: linear-gradient(yellow, yellow), linear-gradient(red, red);
  }
  30% {
    background-image: linear-gradient(yellow, yellow), linear-gradient(orange, orange);
  }
  60% {
    background-image: linear-gradient(yellow, yellow), linear-gradient(blue, blue);
  }
  100% {
    background-image: linear-gradient(yellow, yellow), linear-gradient(green, green);
  }
}

＆＃13;

<div class="box"></div>

＆＃13;

使元素随时间变化颜色，仅在元素悬停时可见，但与悬停本身无关

2 个答案: