Mouse Over / Mouse Off Events

HTML

<div id="box2">
<div id="box"></div>  
</div>

CSS

#box {
    width: 100px;
    height: 100px;
    background: red;
}
#box2 {
    width: 200px;
    height: 200px;
    background: green;
}

JavaScript

$('#box2')[0].addEventListener('mouseenter', function() {
   $('body').css('background', 'orange'); 
})

$('#box').mouseleave(function() {
  
   $('body').css('background', 'lightblue'); 
    
});