hover 上的背景颜色更改不起作用（jquery）

Question

我希望有人可以帮助我解决我遇到的问题。 将鼠标悬停在页面上的导航链接上时，我试图更改页面的背景颜色。 我曾尝试为此使用 jquery （我的 js 代码的最后几行），但它似乎不起作用。 我认为我的其他一些 Js 以某种方式进行了干扰，因为它之前在一个简单的测试页面上工作过。 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'); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="hover-01">Hover this!</div> <div id="hover-change">Background changes</div>

非常感谢任何帮助，抱歉，如果我错过了一些关键信息。 很高兴提供它。 亚当

Answer 1

我将#hover-01更改为.proj-cat并工作！

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

https://codepen.io/kian-kpt/pen/zYEvQjW

Answer 2

始终将 cdn 保持在 jquery 之上，因为 jquery 仅在加载 cdn 时才有效。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js">

$('#hover-01').on('mouseenter', function() {
  $('#hover-change').css('background-color', 'blue');
});
$('#hover-01').on('mouseleave', function() {
  $('#hover-change').css('background-color', 'red');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<div id="hover-01">Hover this!</div>
<div id="hover-change">Background changes</div>