JS中的javascript过渡效果

Question

嗨，我创建了 div，当鼠标悬停在其上时，需要半秒才能从红色变为绿色。 DEMO

div {
  transition: background-color 0.5s ease;
  background-color: red;
  width:100px;
  height:100px;
}
div:hover {
  background-color: green;
}

我知道我可以使用 jquery 实现这一点，但是我想知道我是否可以使用纯 javascript 实现类似的效果。谢谢。

Answer 1

当然可以。

您可以创建一个类:

.divhover {
  background-color: green;
}

在 JavaScript 中:

document.getElementsByTagName('div')[0].className += ' divhover';
                                                      ^ make sure you have a space