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