div {
    width: 100px;
    height: 100px;
    color: white; 
    margin: 10px;
    background-color: blue;
}
.hover {
    transition: background-color 0.3s ease-in-out;
}

.hover:hover {
    background-color: red;
}

const btn = document.querySelector('.hover-js');
btn.style.transition = 'background-color 0.3s ease-in-out';

btn.addEventListener('mouseover', function() {
    this.style.backgroundColor = 'red';
});
btn.addEventListener('mouseout', function() {
    this.style.backgroundColor = 'blue';
});