javascript transition effect in JS

Question

Hi I have created div will take half a second when the mouse is over it to turn from red to green. DEMO

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

I know I can achieve that using jquery however, I want to know whether can I achieve similar effects using pure javascript. Thank you.

Answer 1

Surely you can.

You can create a class:

.divhover {
  background-color: green;
}

and in javascript:

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