悬停时背景颜色变化不起作用（jquery）答案

【问题标题】：Background color change on hover not working (jquery)悬停时背景颜色变化不起作用（jquery）
【发布时间】：2022-01-10 22:57:42
【问题描述】：

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

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

【问题讨论】：

您的代码似乎可以正常工作..？
由于某种原因，id 为 hover-01 的 span 未找到（返回 null）。
在您删除的笔代码中，您删除了 id：item.children[0].innerHTML = `<span style="--index: ${idx};">${letter}</span>`。请将相关代码添加到问题本身。
@Teemu 你能打开codepen吗？悬停在那里时背景保持黑色。抱歉，我在调试方面还不是很有经验，也找不到具体导致问题的原因。
在我之前的评论中，我已经指出了为什么找不到#hover-01。 SO 问题必须独立存在，解决问题所需的所有相关信息都应包含在问题中。

标签： javascript html jquery css hover

【解决方案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

【讨论】：

对于其他人来说“.proj-cat 来自哪里？”它来自 OP 底部链接的 codepen。 #hover-01 应该是 #hover-change，它是实际的 id，但您也可以只使用 body，这也是该元素的有效选择器。

【解决方案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 应该在你的代码之前加载，但是 <script>s 应该放在 <body> 的末尾，否则 javascript 会尝试访问尚不存在的文档元素，这会抛出错误。