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