悬停时背景颜色更改不起作用 (jquery)

Question

我希望有人能帮助我解决我遇到的问题。当鼠标悬停在页面上的导航 link 上时，我试图更改页面的背景颜色。我试图为此使用 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>

悬停时背景颜色更改不起作用 (jquery)

Background color change on hover not working (jquery)

html

javascript

css

jquery

hover