Background color change on hover not working (jquery)

I’m hoping someone can help me with an issue I am having. I am trying to change the background color of my page when mousing over a nav link on the page. I have tried to use jquery for this (last lines of my js code) but it doesn’t seem to be working. I think some of my other Js is interfering in some way because it worked on a simple test page before.
https://codepen.io/adamkelly153/pen/gOGaJYq

$('#hover-01').on('mouseenter', function(){
$('#hover-change').css('background-color', 'blue');
});
$('#hover-01').on('mouseleave', function(){
$('#hover-change').css('background-color', 'red');
});

Any help much appreciated! Sorry if I have missed some key info, happy to provide it.
Adam