title: Background color change on hover not working (jquery)
body: <p>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.
  <a href="https://codepen.io/adamkelly153/pen/gOGaJYq" rel="nofollow noreferrer">https://codepen.io/adamkelly153/pen/gOGaJYq</a></p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$('#hover-01').on('mouseenter', function() {
    $('#hover-change').css('background-color', 'blue');
  });
  $('#hover-01').on('mouseleave', function() {
    $('#hover-change').css('background-color', 'red');
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div id="hover-01"&gt;Hover this!&lt;/div&gt;
  &lt;div id="hover-change"&gt;Background changes&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>Any help much appreciated! Sorry if I have missed some key info, happy to provide it.
  Adam</p>